jQuery - pobieranie niestandardowego atrybutu z wybranej opcji

224

Biorąc pod uwagę następujące kwestie:

<select id="location">
    <option value="a" myTag="123">My option</option>
    <option value="b" myTag="456">My other option</option>
</select>

<input type="hidden" id="setMyTag" />

<script>
    $(function() {
        $("#location").change(function(){
            var element = $(this);
            var myTag = element.attr("myTag");

            $('#setMyTag').val(myTag);
        });
    });
</script>

To nie działa ...
Co muszę zrobić, aby zaktualizować wartość ukrytego pola do wartości myTag po zmianie zaznaczenia. Zakładam, że muszę coś zrobić, aby uzyskać aktualnie wybraną wartość ...?

jquery Jason
źródło

Odpowiedzi:

518

Dodajesz moduł obsługi zdarzeń do <select>elementu.
Dlatego $(this)będzie to samo menu rozwijane, a nie wybrane <option>.

Musisz znaleźć wybrane <option>, takie jak to:

var option = $('option:selected', this).attr('mytag');
SLaks
źródło
7
Sprawiłem, że mój prawie cały czas chrupania był o wiele łatwiejszy ... +1!
eduncan911,
3
Uwaga: jeśli chcesz pobrać opcję wybraną podczas ładowania strony (nie jest to aktualnie wybrana opcja), możesz zamiast tego użyć $ („opcja [wybrana]”) (uwaga: jeśli nie wybrano żadnej opcji, gdy strona załadowana, która nie zwróci żadnych dopasowań, więc wywołanie attr () spowoduje niezdefiniowane. łatwe do przetestowania i radzenia sobie oczywiście).
Jon Kloske
50

Spróbuj tego:

$(function() { 
    $("#location").change(function(){ 
        var element = $(this).find('option:selected'); 
        var myTag = element.attr("myTag"); 

        $('#setMyTag').val(myTag); 
    }); 
});
tvanfosson
źródło
26

Dzieje się tak, ponieważ elementem jest „Wybierz”, a nie „Opcja”, w której znajduje się niestandardowy znacznik.

Spróbuj tego: $("#location option:selected").attr("myTag").

Mam nadzieję że to pomoże.

NawaMan
źródło
Krótka i prosta odpowiedź. : thumbsup:
Vicky Thakor,
9

Spróbuj tego:

$("#location").change(function(){
            var element = $("option:selected", this);
            var myTag = element.attr("myTag");

            $('#setMyTag').val(myTag);
        });

W takiej funkcji dla change(), thisodnosi się do wybierz, nie wybranej opcji.

Davide Gualano
źródło
8

Załóżmy, że masz wiele wyborów. Można to zrobić:

$('.selectClass').change(function(){
    var optionSelected = $(this).find('option:selected').attr('optionAtribute');
    alert(optionSelected);//this will show the value of the atribute of that option.
});
Paulo
źródło
7

Jesteś bardzo blisko:

var myTag = $(':selected', element).attr("myTag");
Cerin
źródło
4

Prostsza składnia, jeśli jedna forma.

var option = $('option:selected').attr('mytag')

... jeśli więcej niż jeden formularz.

var option = $('select#myform option:selected').attr('mytag')

openwonk
źródło
1

Oto cały skrypt z wywołaniem AJAX, aby kierować na jedną listę na stronie z wieloma listami. Żadne z powyższych rzeczy nie działało dla mnie, dopóki nie użyłem atrybutu „id”, mimo że nazwa mojego atrybutu to „ItemKey”. Za pomocą debugera

Debugowanie Chrome

Mogłem zobaczyć, że wybrana opcja ma atrybuty: z mapą do „id” JQuery i wartości.

<html>
<head>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<select id="List1"></select>
<select id="List2">
<option id="40000">List item #1</option>
<option id="27888">List item #2</option>
</select>

<div></div>
</body>
<script type="text/JavaScript">
//get a reference to the select element
$select = $('#List1');

//request the JSON data and parse into the select element
$.ajax({
url: 'list.json',
dataType:'JSON',
success:function(data){

//clear the current content of the select
$select.html('');

//iterate over the data and append a select option
$.each(data.List, function(key, val){
$select.append('<option id="' + val.ItemKey + '">' + val.ItemText + '</option>');
})
},

error:function(){

//if there is an error append a 'none available' option
$select.html('<option id="-1">none available</option>');
}
});

$( "#List1" ).change(function () {
var optionSelected = $('#List1 option:selected').attr('id');
$( "div" ).text( optionSelected );
});
</script>
</html>

Oto plik JSON do utworzenia ...

{  
"List":[  
{  
"Sort":1,
"parentID":0,
"ItemKey":100,
"ItemText":"ListItem-#1"
},
{  
"Sort":2,
"parentID":0,
"ItemKey":200,
"ItemText":"ListItem-#2"
},
{  
"Sort":3,
"parentID":0,
"ItemKey":300,
"ItemText":"ListItem-#3"
},
{  
"Sort":4,
"parentID":0,
"ItemKey":400,
"ItemText":"ListItem-#4"
}
]
}

Mam nadzieję, że to pomoże, dziękuję wszystkim za doprowadzenie mnie tak daleko.

Curtis Fisher
źródło
0

Spróbuj tego przykładu:

$("#location").change(function(){

    var tag = $("option[value="+$(this).val()+"]", this).attr('mytag');

    $('#setMyTag').val(tag); 

});
Dharmendra Singh
źródło
0 
$("body").on('change', '#location', function(e) {

 var option = $('option:selected', this).attr('myTag');

});
Amit-Rlogical
źródło
0

Możesz również wypróbować ten jeden z data-myTag

<select id="location">
    <option value="a" data-myTag="123">My option</option>
    <option value="b" data-myTag="456">My other option</option>
</select>

<input type="hidden" id="setMyTag" />

<script>
    $(function() {
        $("#location").change(function(){
           var myTag = $('option:selected', this).data("myTag");

           $('#setMyTag').val(myTag);
        });
    });
</script>
Akhtar Munir
źródło
0

Najłatwiejszy,

$('#location').find('option:selected').attr('myTag');
Robin Hossain
źródło