发表新帖
发表新帖

jQuery - getting custom attribute from selected option

后端 未结
关注
12 1202
礼貌的吻别
礼貌的吻别 2020-11-30 17:19

Given the following:
提交评论
  •  加载中...
  • 猫巷女王i
    2020-11-30 18:01

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

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

    Hope this helps.

    0 讨论(0)
  • 无人共我
    2020-11-30 18:03

    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');
    0 讨论(0)
  • 盖世英雄少女心
    2020-11-30 18:03

    Try this:

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

        $('#setMyTag').val(myTag); 
    }); 
});
    0 讨论(0)
  • 不思量自难忘°
    2020-11-30 18:03

    Try This Example:

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

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

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

});
    0 讨论(0)
  • 梦毁少年i
    2020-11-30 18:07

    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

    Chrome Debug

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

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

    {  
"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.

    0 讨论(0)
    • 上一页 1 2
     看不清?
    提交回复
    热议问题