jQuery - seçili seçenekten özel özellik alma

224

Aşağıdaki göz önüne alındığında:

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

Bu çalışmıyor ...
Gizli alanın değerini, seçim değiştirildiğinde myTag değerine güncelleştirmek için ne yapmam gerekir. Seçili değeri almakla ilgili bir şeyler yapmam gerektiğini varsayıyorum ...?

jquery

— Jason
kaynak

518

Olay işleyicisini <select>öğeye ekliyorsunuz .
Bu nedenle, $(this)açılan listenin kendisi seçilir, seçilen değil <option>.

Seçileni şu şekilde bulmanız gerekir <option>:

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

— SLaks
kaynak

7

Tüm çakmak krizi zamanımı çok daha kolay hale getirdim ... +1!

— eduncan911

3

Sayfa yüklendiğinde (şu anda seçili olmayan seçenek değil) seçilen seçeneği almak istiyorsanız bunun yerine $ ('seçenek [seçili]', bunu kullanabilirsiniz) kullanabilirsiniz (not: .. sayfa o kadar kolay tabii şurada testi ve anlaşma tanımsız yol açacağı üzerinde attr () çağırarak), yani hiç eşleşme dönecektir, yüklenen

— Jon Kloske

50

Bunu dene:

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

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

— tvanfosson
kaynak

26

Bunun nedeni, öğenin özel etikete sahip olduğunuz "Seçenek" değil "Seç" olmasıdır.

Bu deneyin: $("#location option:selected").attr("myTag").

Bu yardımcı olur umarım.

— NawaMan
kaynak

Kısa ve basit bir cevap. : thumbsup:

— Vicky Thakor

9

Bunu dene:

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

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

İçin geri arama işlevi ise change(), thisseçme için değil, belirlenen seçeneğe karşılık gelir.

— Davide Gualano
kaynak

8

Varsayalım ki birçok seçiminiz var. Bunu yapabilir:

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

7

Oldukça yakınsın:

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

— Cerin
kaynak

4

Bir form varsa daha basit sözdizimi.

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

... birden fazla form varsa.

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

— openwonk
kaynak

1

Birden fazla listeye sahip bir sayfadaki tek bir listeyi hedeflemek için AJAX çağrısına sahip komut dosyasının tamamı aşağıdadır. Özellik adım "ItemKey" olmasına rağmen "id" özelliğini kullanana kadar yukarıdaki diğer öğelerin hiçbiri benim için çalışmadı. Hata ayıklayıcıyı kullanarak

Chrome Hata Ayıklama

Seçilen seçenek öznitelikleri olduğunu görebildim: bir harita ile JQuery "id" ve değeri.

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

İşte oluşturmak için JSON Dosyası ...

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

Umarım bu yardımcı olur, beni bu kadar ileri götürdüğün için hepinize teşekkür ederim.

— Curtis Fisher
kaynak

0

Bu Örneği Deneyin:

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

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

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

});

— Dharmendra Singh
kaynak

0

$("body").on('change', '#location', function(e) {

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

});

— Amit-Rlogical
kaynak

0

Ayrıca şunu da deneyebilirsiniz 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
kaynak

0

En kolayı,

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

— Robin Hossain
kaynak