jQuery – 从选定的选项获取自定义属性
鉴于以下情况：
<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> 那不行…
当select被改变时，我需要做什么才能将隐藏字段的值更新为myTag的值。 我假设我需要做一些关于获取当前选定的值…？
您将事件处理程序添加到<select>元素。
因此， $(this)将是下拉本身，而不是选中的<option> 。
您需要find所选的<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”而不是“选项”，其中您有自定义标记。
试试这个： $("#location option:selected").attr("myTag") 。
希望这可以帮助。
尝试这个：
$("#location").change(function(){ var element = $("option:selected", this); var myTag = element.attr("myTag"); $('#setMyTag').val(myTag); });
在change()的callback函数中， this指的是select，而不是选中的选项。
假设你有很多select。 这可以做到这一点：
$('.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 myTag = $(':selected', element).attr("myTag");
简单的语法，如果一个forms。
var option = $('option:selected').attr('mytag')
…如果不止一种forms。
var option = $('select#myform option:selected').attr('mytag')
这里是整个脚本与一个AJAX调用来定位一个页面内的多个列表的单个列表。 上述其他东西都没有为我工作，直到我使用“ID”属性，即使我的属性名称是“ItemKey”。 通过使用debugging器
Chromedebugging
我能够看到所选的选项有属性：带有一个映射到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文件来创build…
{ "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); });
