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

小开

最佳答案

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

你需要找到被选中的<option>，就像这样:

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

小开

试试这个:

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


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

小开

这是因为元素是“Select”而不是“Option”，其中有自定义标记。

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

希望这能有所帮助。

小开

试试这个:

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


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

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

小开

你很接近了:

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

小开

假设你有很多选择。这可以做到:

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

小开

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

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

．.．如果多于一种形式。

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

小开

下面是带有AJAX调用的完整脚本，该脚本以包含多个列表的页面中的单个列表为目标。在我使用“id”属性之前，上面的任何东西都不适合我，尽管我的属性名称是“ItemKey”。通过使用调试器

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

希望这能有所帮助，感谢上面所有人让我走到这一步。

小开

试试这个例子:

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


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


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


});

小开

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


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


});

小开

你也可以用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>

小开

最简单的，

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

小开

直接的方法是:

获取所选选项属性值:

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

获取选定文本:

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

获取所选值:

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

小开

var optionAttr1 = $(this).find('option:selected').attr("myTag");
var optionAttr = $('#location option:selected').attr("myTag");