jQuery - चयनित विकल्प से कस्टम विशेषता प्राप्त करना

224

निम्नलिखित को देखते हुए:

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

यह काम नहीं करता है ...
चयन को बदलने पर myTag के मान को अद्यतन किए गए छिपे हुए फ़ील्ड का मान प्राप्त करने के लिए मुझे क्या करने की आवश्यकता है। मुझे लगता है मैं वर्तमान में चयनित मूल्य प्राप्त करने के बारे में कुछ करने की जरूरत है ...?

jquery

— जेसन
स्रोत

518

आप ईवेंट हैंडलर को <select>तत्व में जोड़ रहे हैं ।
इसलिए, $(this)ड्रॉपडाउन ही होगा, चयनित नहीं <option>।

आपको <option>इस तरह से चयनित की आवश्यकता है :

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

— SLaks
स्रोत

7

मेरे सभी-तंग क्रंच-टाइम को इतना आसान बना दिया ... +1!

— eduncan911

3

ध्यान दें, यदि आप उस विकल्प को पुनः प्राप्त करना चाहते हैं जो पृष्ठ लोड होने पर चुना गया था (वर्तमान में चयनित विकल्प नहीं) तो आप इसके बजाय $ ('विकल्प [चयनित]' का उपयोग कर सकते हैं) (ध्यान दें: यदि कोई विकल्प तब नहीं चुना गया था जब पृष्ठ लोड किया गया है, जो कोई मिलान नहीं लौटाएगा, इसलिए उस पर कॉल करने से अट्रेक्ट () का परिणाम अपरिभाषित होगा। पाठ्यक्रम के लिए परीक्षण करना और

— उससे निपटना

50

इसे इस्तेमाल करे:

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

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

— tvanfosson
स्रोत

26

ऐसा इसलिए है क्योंकि तत्व "चयन" है न कि "विकल्प" जिसमें आपके पास कस्टम टैग है।

इस प्रयास करें: $("#location option:selected").attr("myTag")।

उम्मीद है की यह मदद करेगा।

— NawaMan
स्रोत

छोटा और सरल उत्तर। : थम्सअप:

— विक्की ठाकोर

9

इसे इस्तेमाल करे:

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

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

कॉलबैक फ़ंक्शन के लिए change(), thisचयनित विकल्प को नहीं, चयन को संदर्भित करता है।

— डेविड गुआलानो
स्रोत

8

मान लीजिए कि आपके पास कई चयन हैं। यह कर सकते हैं:

$('.selectClass').change(function(){
    var optionSelected = $(this).find('option:selected').attr('optionAtribute');
    alert(optionSelected);//this will show the value of the atribute of that option.
});

— पाउलो
स्रोत

7

तुम बहुत करीब हो:

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

— Cerin
स्रोत

4

एक रूप अगर सरल वाक्यविन्यास।

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

... अगर एक से अधिक रूप।

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

— openwonk
स्रोत

1

यहाँ AJAX कॉल के साथ पूरी स्क्रिप्ट है जिसमें एक पेज को एकाधिक सूचियों के साथ एक सूची में लक्षित किया गया है। मेरे लिए ऊपर दिए गए अन्य सामान में से किसी ने भी तब तक काम नहीं किया जब तक कि मैंने "id" विशेषता का उपयोग नहीं किया, हालांकि मेरा विशेषता नाम "ItemKey" है। डिबगर का उपयोग करके

क्रोम डीबग

मैं यह देखने में सक्षम था कि चयनित विकल्प में विशेषताएं थीं: 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>

यहाँ JSON फ़ाइल बनाने के लिए है ...

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

आशा है कि यह मदद करता है, मुझे यह प्राप्त करने के लिए उपरोक्त सभी को धन्यवाद।

— कर्टिस फिशर
स्रोत

0

इस उदाहरण का प्रयास करें:

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

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

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

});

— धर्मेंद्र सिंह
स्रोत

0

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

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

});

— अमित-Rlogical
स्रोत

0

आप इस के साथ भी कोशिश कर सकते हैं 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>

— अख्तर मुनीर
स्रोत

0

सबसे आसान एक,

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

— रॉबिन हुसैन
स्रोत