jQuery - mendapatkan atribut khusus dari opsi yang dipilih

224

Diberikan sebagai berikut:

<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>

Itu tidak berfungsi ...
Apa yang harus saya lakukan untuk mendapatkan nilai bidang tersembunyi diperbarui ke nilai myTag ketika pilih diubah. Saya berasumsi saya perlu melakukan sesuatu untuk mendapatkan nilai yang dipilih saat ini ...?

jquery Jason
sumber

Jawaban:

518

Anda menambahkan event handler ke <select>elemen.
Oleh karena itu, $(this)akan menjadi dropdown itu sendiri, bukan yang dipilih<option> .

Anda perlu menemukan yang dipilih <option>, seperti ini:

var option = $('option:selected', this).attr('mytag');
Slaks
sumber
7
Membuat waktu krisis saya semalaman jauh lebih mudah ... +1!
eduncan911
3
Catatan, jika Anda ingin mengambil opsi yang dipilih saat halaman dimuat (bukan opsi yang dipilih saat ini), Anda dapat menggunakan $ ('opsi [terpilih]', ini) sebagai gantinya (catatan: jika tidak ada opsi yang dipilih saat laman dimuat, yang tidak akan mengembalikan kecocokan, jadi memanggil attr () untuk itu akan menghasilkan undefined. mudah untuk diuji dan ditangani tentu saja.)
Jon Kloske
50

Coba ini:

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

        $('#setMyTag').val(myTag); 
    }); 
});
tvanfosson
sumber
26

Itu karena elemennya adalah "Pilih" dan bukan "Opsi" di mana Anda memiliki tag khusus.

Coba ini: $("#location option:selected").attr("myTag").

Semoga ini membantu.

NawaMan
sumber
Jawaban singkat dan sederhana. : thumbsup:
Vicky Thakor
9

Coba ini:

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

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

Dalam fungsi panggilan balik untuk change(), thismerujuk ke pilih, bukan ke opsi yang dipilih.

Davide Gualano
sumber
8

Misalkan Anda memiliki banyak pilihan. Ini bisa melakukannya:

$('.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
sumber
7

Anda cukup dekat:

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

Sintaksis yang lebih sederhana jika satu bentuk.

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

... jika lebih dari satu bentuk.

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

openwonk
sumber
1

Berikut adalah keseluruhan skrip dengan panggilan AJAX untuk menargetkan satu daftar dalam satu halaman dengan banyak daftar. Tidak satu pun dari hal-hal lain di atas yang berfungsi untuk saya sampai saya menggunakan atribut "id" meskipun nama atribut saya adalah "ItemKey". Dengan menggunakan debugger

Debug Chrome

Saya dapat melihat bahwa opsi yang dipilih memiliki atribut: dengan peta ke "id" dan nilai JQuery.

<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>

Inilah File JSON yang akan dibuat ...

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

Semoga ini bisa membantu, terima kasih semuanya sudah membantu saya sejauh ini.

Curtis Fisher
sumber
0

Coba Contoh Ini:

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

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

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

});
Dharmendra Singh
sumber
0 
$("body").on('change', '#location', function(e) {

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

});
Amit-Rlogical
sumber
0

Anda juga dapat mencoba yang ini juga 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
sumber
0

Yang termudah,

$('#location').find('option:selected').attr('myTag');
Robin Hossain
sumber