jQuery - 从选定的选项获取自定义属性答案

【问题标题】：jQuery - getting custom attribute from selected optionjQuery - 从选定的选项获取自定义属性
【发布时间】：2010-02-09 16:33:37
【问题描述】：

鉴于以下情况：

<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

【解决方案1】：

您正在将事件处理程序添加到 <select> 元素。
因此，$(this) 将是下拉列表本身，而不是选定的 <option>。

你需要找到选中的<option>，像这样：

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

【讨论】：

让我的通宵加班时间变得如此轻松...+1！
注意，如果您要检索在页面加载时选择的选项（不是当前选择的选项），您可以使用 $('option[selected]', this) 代替（注意：如果在页面加载时没有选择任何选项，则不会返回任何匹配项，因此在其上调用 attr() 将导致未定义。当然易于测试和处理。）

【解决方案2】：

试试这个：

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

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

【讨论】：

【解决方案3】：

那是因为元素是“选择”而不是“选项”，其中您有自定义标记。

试试这个：$("#location option:selected").attr("myTag")。

希望这会有所帮助。

【讨论】：

简短的回答。 :thumbup:

【解决方案4】：

假设您有很多选择。这样做可以：

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

【讨论】：

【解决方案5】：

试试这个：

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

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

在change()的回调函数中，this指的是选择，而不是选择的选项。

【讨论】：

【解决方案6】：

你已经很接近了：

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

【讨论】：

【解决方案7】：

最简单的，

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

【讨论】：

【解决方案8】：

如果是一种形式，则语法更简单。

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

...如果不止一种形式。

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

【讨论】：

【解决方案9】：

这是一个完整的脚本，它通过 AJAX 调用来定位具有多个列表的页面中的单个列表。即使我的属性名称是“ItemKey”，在我使用“id”属性之前，上面的其他任何东西都没有对我有用。通过使用调试器

Chrome Debug

我能够看到所选选项具有属性：带有到 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"
}
]
}

希望这会有所帮助，谢谢大家让我走到这一步。

【讨论】：

【解决方案10】：

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

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

});

【讨论】：

【解决方案11】：

试试这个例子：

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

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

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

});

【讨论】：

【解决方案12】：

你也可以试试这个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>

【讨论】：

【解决方案13】：

直截了当的方法是：

获取选中的选项属性值：

var selectedOptionAttributeValue =   $('#location option:selected').attr('myTag');

获取选定的文本：

 var selectedOptionText = $('#location').text();

获取选定值：

var selectedOptionValue = $('#location').val();

【讨论】：