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

ทำให้ crunch-nighter ตลอดเวลาของฉันง่ายขึ้นมาก ... +1!

— eduncan911

3

หมายเหตุหากคุณต้องการดึงตัวเลือกที่ถูกเลือกเมื่อเพจโหลด (ไม่ใช่ตัวเลือกที่เลือกในปัจจุบัน) คุณสามารถใช้ $ ('ตัวเลือก [เลือก]', นี่) แทน (หมายเหตุ: หากไม่มีตัวเลือกที่ถูกเลือกเมื่อ โหลดหน้าเว็บแล้วจะไม่ส่งคืนการจับคู่ดังนั้นจึงเรียกใช้ attr () ซึ่งจะทำให้ไม่ได้กำหนดง่ายต่อการทดสอบและจัดการกับแน่นอน)

— Jon Kloske

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
แหล่งที่มา

คำตอบสั้น ๆ และง่าย : thumbsup:

— Vicky Thakor

9

ลองสิ่งนี้:

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

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

ในฟังก์ชั่นการโทรกลับสำหรับchange(), thisหมายถึงเลือกที่จะไม่ตัวเลือกที่เลือก

— Davide Gualano
แหล่งที่มา

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.
});

— paulo
แหล่งที่มา

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" โดยใช้โปรแกรมดีบั๊ก

Debug ของ Chrome

ฉันสามารถเห็นว่าตัวเลือกที่เลือกมีคุณสมบัติ: ด้วยแผนที่ไปที่ JQuery "id" และค่า

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

});

— Dharmendra Singh
แหล่งที่มา

0

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

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

});

— Amit-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');

— Robin Hossain
แหล่งที่มา