jQuery的 - 從給定所選的選項

166

<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在選擇被更改時。我假設我需要做一些關於獲取當前選定的值......？

來源

2010-02-09 Jason

有沒有人告訴你「你搖滾！」 ..我想我是第一個！ – curiousBoy 2015-07-02 01:05:05

387

您正在將事件處理程序添加到<select>元素。
因此，$(this)將是本身的下拉菜單，而不是選定的<option>。

你需要找到所選<option>，就像這樣：

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

來源

2010-02-09 16:37:36 SLaks

讓我的全部關卡緊縮時間變得如此簡單... +1！ – eduncan911 2010-07-29 14:30:40

偉大的:)謝謝SLaks 50是我的:) – kbvishnu 2013-01-15 16:50:43

謝謝，對我有幫助 – user1493023 2014-01-12 18:11:34

試試這個：

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

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

來源

2010-02-09 16:37:54 tvanfosson

，由於該元素是「選擇」，而不是「選項」中，你必須自定義標籤。

試試這個：$("#location option:selected").attr("myTag")。

希望這會有所幫助。

來源

2010-02-09 16:38:43 NawaMan

試試這個：

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

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

在回調函數change()，this指的是選擇，而不是選擇的選擇。

來源

2010-02-09 16:41:30

你八九不離十：

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

來源

2010-02-09 16:42:22 Cerin

假設你有很多選擇。這可以做到這一點：

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

來源

2011-11-13 01:56:47 paulo

如果一種形式更簡單的語法。

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

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

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

來源

2016-08-30 16:30:35 openwonk

這裏是一個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" 
} 
] 
}

希望這會有所幫助，謝謝大家上面讓我這麼遠。

來源

2017-07-27 20:24:38

嘗試這個例子：

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

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

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

});

來源

2017-10-06 05:38:44

jQuery的 - 從給定所選的選項

回答

相關問題