jQuery - uzyskiwanie atrybut niestandardowy od wybranej opcji

166

Biorąc pod uwagę następujące elementy:jQuery - uzyskiwanie atrybut niestandardowy od wybranej opcji

<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 uzyskać wartość pola ukrytego zaktualizowana do wartości myTag po zmianie wyboru. Zakładam, że muszę coś zrobić z uzyskaniem aktualnie wybranej wartości ...?

Źródło

2010-02-09 Jason

Czy ktoś powiedzieć "You Rock !!!" .. Cóż, myślę, że jestem pierwszy! – curiousBoy

387

Dodajesz obsługę zdarzeń do elementu <select>.
Dlatego $(this) będzie samym menu, a nie wybranym <option>.

Trzeba znaleźć wybrany <option>, tak:

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

Źródło

2010-02-09 16:37:36 SLaks

Zrobiłem mój wszechogarniający czas chrupania o wiele łatwiejszy ... +1! – eduncan911

Świetne :) Dzięki SLaks 50 jest przez moje :) – kbvishnu

Dzięki, pomocne dla mnie – user1493023

Spróbuj tego:

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

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

Źródło

2010-02-09 16:37:54 tvanfosson

że ponieważ elementem jest „Wybierz”, a nie „Option”, w której trzeba niestandardowy tag.

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

Mam nadzieję, że to pomoże.

Źródło

2010-02-09 16:38:43 NawaMan

Spróbuj:

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

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

W takiej funkcji dla change(), this dotyczy select, nie wybranej opcji.

Źródło

2010-02-09 16:41:30

Jesteś całkiem blisko:

var myTag = $(':selected', element).attr("myTag");

Źródło

2010-02-09 16:42:22 Cerin

Załóżmy, że masz wiele wybiera. To może 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. 
});

Źródło

2011-11-13 01:56:47 paulo

Prostsza składnia w przypadku jednego formularza.

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

... jeśli więcej niż jednej postaci.

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

Źródło

2016-08-30 16:30:35 openwonk

Oto cały skrypt z wywołania AJAX kierować jedną listę w obrębie strony z wielu list. Żadna z powyższych rzeczy nie działała dla mnie, dopóki nie użyłem atrybutu "id", mimo że moja nazwa atrybutu to "ItemKey". Za pomocą debuggera

Chrome Debug

byłem w stanie zobaczyć, że wybrana opcja miała 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 pliku JSON do tworzenia ...

{ 
"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" 
} 
] 
}

Nadzieja to pomaga, dziękuję wszystkim za wprowadzenie mnie powyżej tej pory.

Źródło

2017-07-27 20:24:38

Spróbuj poniższym przykładzie:

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

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

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

});

Źródło

2017-10-06 05:38:44

jQuery - uzyskiwanie atrybut niestandardowy od wybranej opcji

Odpowiedz

Powiązane problemy