jQuery - নির্বাচিত বিকল্প থেকে কাস্টম বৈশিষ্ট্য প্রাপ্ত করা getting


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 এর মানতে আপডেট করার জন্য আমাকে কী করতে হবে? আমি ধরে নিচ্ছি বর্তমানে নির্বাচিত মান পাওয়ার জন্য আমার কিছু করা দরকার ...?

উত্তর:


518

আপনি <select>উপাদানটির সাথে ইভেন্ট হ্যান্ডলার যুক্ত করছেন ।
সুতরাং, $(this)নির্বাচিত নয়, নিজেই ড্রপডাউন হবে <option>

আপনাকে নির্বাচিতগুলি এটির <option>মতো খুঁজে পেতে হবে :

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

7
আমার অল-নাইটার ক্রাঙ্ক-টাইমকে এত সহজ করে দিয়েছে ... +1!
eduncan911

3
দ্রষ্টব্য, আপনি পৃষ্ঠাটি লোড করার সময় নির্বাচিত বিকল্পটি পুনরুদ্ধার করতে খুঁজছেন (বর্তমানে নির্বাচিত বিকল্প নয়) আপনি পরিবর্তে $ ('বিকল্প [নির্বাচিত]', এটি ব্যবহার করতে পারেন (দ্রষ্টব্য: যদি কোনও বিকল্প নির্বাচন করা হয়নি তখন পৃষ্ঠাটি লোড হয়েছে, এটি কোনও মিলবে না, সুতরাং এটারে () এ কল করার ফলে
অপরিজ্ঞাত হবে for

50

এটা চেষ্টা কর:

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

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

26

কারণ উপাদানটি "নির্বাচন করুন" এবং "বিকল্প" নয় যাতে আপনার কাস্টম ট্যাগ রয়েছে।

এই চেষ্টা করুন: $("#location option:selected").attr("myTag")

আশাকরি এটা সাহায্য করবে.


সংক্ষিপ্ত এবং সহজ উত্তর। : থাম্বসআপ:
ভিকি ঠাকুর

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");

4

সরল বাক্য গঠন যদি একটি ফর্ম হয়।

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

... একাধিক ফর্ম যদি।

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


1

একাধিক তালিকাগুলির সাথে কোনও পৃষ্ঠার মধ্যে একটি একক তালিকা লক্ষ্য করতে এখানে AJAX কল সহ পুরো স্ক্রিপ্ট এখানে। আমার বৈশিষ্ট্যটির নাম "আইটেমকি" হলেও আমি "আইডি" বৈশিষ্ট্যটি ব্যবহার না করা পর্যন্ত উপরের অন্যান্য জিনিসগুলির মধ্যে আমার পক্ষে কাজ করা হয়নি। ডিবাগার ব্যবহার করে

ক্রোম ডিবাগ

আমি দেখতে সক্ষম হয়েছি যে নির্বাচিত বিকল্পটির বৈশিষ্ট্য রয়েছে: জিকুয়েরি "আইডি" এবং মানটির সাথে মানচিত্র।

<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

আপনি এটিকেও চেষ্টা করে দেখতে পারেন 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>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.