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

时间：2022-11-27 11:47:36

Given the following:

鉴于以下几点:

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

That does not work...
What do I need to do to get the value of the hidden field updated to the value of myTag when the select is changed. I'm assuming I need to do something about getting the currently selected value...?

这并不工作……当select更改时，我需要做什么才能将隐藏字段的值更新为myTag的值。我假设我需要做一些事情来获取当前选择的值…?

9 个解决方案

#1

408  

You're adding the event handler to the <select> element.
Therefore, $(this) will be the dropdown itself, not the selected <option>.

将事件处理程序添加到

You need to find the selected <option>, like this:

您需要找到所选的 <选项> ，如下所示: 

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

#2

41  

Try this:

试试这个:

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

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

#3

17  

That because the element is the "Select" and not "Option" in which you have the custom tag.

这是因为元素是“选择”而不是“选项”，其中包含自定义标记。

Try this: $("#location option:selected").attr("myTag").

试试这个:$(" #位置选择:选择").attr(“myTag”)。

Hope this helps.

希望这个有帮助。

#4

9  

Try this:

试试这个:

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

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

In the callback function for change(), this refers to the select, not to the selected option.

在change()回调函数中，这指的是select，而不是selected选项。

#5

5  

Suppose you have many selects. This can do it:

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

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

#6

4  

You're pretty close:

你很接近:

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

#7

3  

Simpler syntax if one form.

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

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

= $ var选项(选择:选择).attr(“mytag”)

... if more than one form.

…如果不止一种形式。

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

var选项= $('select my# form option:selected').attr('mytag')

#8

1  

Here is the entire script with an AJAX call to target a single list within a page with multiple lists. None of the other stuff above worked for me until I used the "id" attribute even though my attribute name is "ItemKey". By using the debugger

这是一个完整的脚本，它使用AJAX调用来针对一个具有多个列表的页面中的单个列表。在我使用“id”属性(即使我的属性名是“ItemKey”)之前，上面提到的所有东西都对我不起作用。通过使用调试器

Chrome Debug

Chrome调试

I was able to see that the selected option had attributes: with a map to the JQuery "id" and the value.

我可以看到所选的选项具有属性:带有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>

Here is the JSON File to create...

这里是要创建的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"
}
]
}

Hope this helps, thank you all above for getting me this far.

希望这能有所帮助，感谢你们的帮助。

#9

0  

Try This Example:

试试这个例子:

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

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

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

});

#1

408  

You're adding the event handler to the <select> element.
Therefore, $(this) will be the dropdown itself, not the selected <option>.

将事件处理程序添加到

You need to find the selected <option>, like this:

您需要找到所选的 <选项> ，如下所示: 

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

#2

41  

Try this:

试试这个:

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

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

#3

17  

That because the element is the "Select" and not "Option" in which you have the custom tag.

这是因为元素是“选择”而不是“选项”，其中包含自定义标记。

Try this: $("#location option:selected").attr("myTag").

试试这个:$(" #位置选择:选择").attr(“myTag”)。

Hope this helps.

希望这个有帮助。

#4

9  

Try this:

试试这个:

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

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

In the callback function for change(), this refers to the select, not to the selected option.

在change()回调函数中，这指的是select，而不是selected选项。

#5

5  

Suppose you have many selects. This can do it:

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

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

#6

4  

You're pretty close:

你很接近:

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

#7

3  

Simpler syntax if one form.

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

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

= $ var选项(选择:选择).attr(“mytag”)

... if more than one form.

…如果不止一种形式。

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

var选项= $('select my# form option:selected').attr('mytag')

#8

1  

Here is the entire script with an AJAX call to target a single list within a page with multiple lists. None of the other stuff above worked for me until I used the "id" attribute even though my attribute name is "ItemKey". By using the debugger

这是一个完整的脚本，它使用AJAX调用来针对一个具有多个列表的页面中的单个列表。在我使用“id”属性(即使我的属性名是“ItemKey”)之前，上面提到的所有东西都对我不起作用。通过使用调试器

Chrome Debug

Chrome调试

I was able to see that the selected option had attributes: with a map to the JQuery "id" and the value.

我可以看到所选的选项具有属性:带有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>

Here is the JSON File to create...

这里是要创建的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"
}
]
}

Hope this helps, thank you all above for getting me this far.

希望这能有所帮助，感谢你们的帮助。

#9

0  

Try This Example:

试试这个例子:

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

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

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

});
标签：

相关文章