jQuery - nhận thuộc tính tùy chỉnh từ tùy chọn đã chọn

224

Đưa ra những điều sau đây:

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

Điều đó không hoạt động ...
Tôi cần làm gì để giá trị của trường ẩn được cập nhật thành giá trị của myTag khi thay đổi lựa chọn. Tôi giả sử tôi cần phải làm gì đó để nhận được giá trị hiện được chọn ...?

jquery

— Jason
nguồn

518

Bạn đang thêm trình xử lý sự kiện cho <select>phần tử.
Do đó, $(this)sẽ là chính thả xuống, không phải là lựa chọn <option>.

Bạn cần tìm cái đã chọn <option>, như thế này:

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

— SLaks
nguồn

7

Làm cho thời gian khủng hoảng của tôi trở nên dễ dàng hơn rất nhiều ... +1!

— eduncan911

3

Lưu ý, nếu bạn đang muốn truy xuất tùy chọn đã được chọn khi trang được tải (không phải tùy chọn hiện được chọn), bạn có thể sử dụng $ ('tùy chọn [đã chọn]', điều này) thay vào đó (lưu ý: nếu không có tùy chọn nào được chọn khi trang được tải, sẽ không trả lại kết quả

— trùng

50

Thử cái này:

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

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

— tvanfosson
nguồn

26

Điều đó bởi vì phần tử là "Chọn" chứ không phải "Tùy chọn" trong đó bạn có thẻ tùy chỉnh.

Hãy thử điều này : $("#location option:selected").attr("myTag").

Hi vọng điêu nay co ich.

— Nawaman
nguồn

Câu trả lời ngắn gọn và đơn giản. : thumbsup:

— Vicky Thakor

9

Thử cái này:

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

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

Trong chức năng gọi lại cho change(), thistham chiếu đến lựa chọn, không phải tùy chọn đã chọn.

— Davide Gualano
nguồn

8

Giả sử bạn có nhiều lựa chọn. Điều này có thể làm điều đó:

$('.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
nguồn

7

Bạn khá thân thiết:

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

— Ngũ cốc
nguồn

4

Cú pháp đơn giản hơn nếu một dạng.

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

... Nếu nhiều hơn một hình thức.

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

— openwonk
nguồn

1

Đây là toàn bộ tập lệnh với lệnh gọi AJAX để nhắm mục tiêu một danh sách trong một trang có nhiều danh sách. Không có thứ nào khác ở trên hoạt động với tôi cho đến khi tôi sử dụng thuộc tính "id" mặc dù tên thuộc tính của tôi là "ItemKey". Bằng cách sử dụng trình gỡ lỗi

Gỡ lỗi Chrome

Tôi đã có thể thấy rằng tùy chọn đã chọn có các thuộc tính: với ánh xạ tới "id" của JQuery và giá trị.

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

Đây là tệp JSON để tạo ...

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

Hy vọng điều này sẽ giúp, cảm ơn tất cả các bạn ở trên đã đưa tôi đến nay.

— Công chúa xứ Wales
nguồn

0

Hãy thử ví dụ này:

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

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

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

});

— Pháp thân
nguồn

0

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

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

});

— Amit-Rlogical
nguồn

0

Bạn cũng có thể thử cái này với 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
nguồn

0

Dễ nhất

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

— Robin Hossain
nguồn