javascript - jQuery从下拉获取选项

  显示原文与译文双语对照的内容
通常我使用 $("#id").val() 来返回所选选项的值,但这次它不是 work.The 选择的标记有标识 aioConceptName

html代码


<label>Name</label>
 <input type="text" name="name"/>
 <select id="aioConceptName">
 <option>choose io</option>
 <option>roma</option>
 <option>totti</option>
 </select>
</label>

时间:

对于下拉选项,你可能需要类似的内容:


var conceptName = $('#aioConceptName').find(":selected").text();

val() 不取巧的原因是因为,单击其中一个选项不会更改的值dropdown--it只是将 :selected 属性添加到所选的选项,那就是子的下拉列表,。

我无意中遇到了这个问题,开发了一个更简明的版本的bonneville回答:


var conceptName = $('#aioConceptName :selected').text();

或者一般:


$('#id :pseudoclass')

这省去了额外的jQuery调用,一次性选择所有的东西,而且更清晰。

于每个 <option>的相关的, 对值进行设置

.val() 没有工作的原因是 .val() 返回 value 属性。 在每个所以在 value 属性必须设置为已经做了合适的工作,


<select id="aioConceptName">
 <option value="0">choose io</option>
 <option value="1">roma</option>
 <option value="2">totti</option>
</select>

这样做可以让你做 $('#aioConceptName').val() 而不是其他的:selected 巫术。

请尝试该值。。


$("select#id_of_select_element option").filter(":selected").val();

或者这是文本。。


$("select#id_of_select_element option").filter(":selected").text();

你是否考虑使用普通的旧 javascript?


var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

参见获取带有 javascript的选项文本/值

如果你在事件上下文中,在jQuery中,你可以使用以下方法检索选中的选项元素:
$(this).find('option:selected') 如下所示:


$('dropdown_selector').change(function() {
 var option = $(this).find('option:selected');
});

使用 jQuery,只需添加一个 change 事件并在该处理程序中获取选定的值或者文本。

如果你需要所选文本,请使用以下代码:


$("#aioConceptName").change(function () {
 alert($("#aioConceptName :selected").text())
});

或者如果你需要选择的值,请使用以下代码:


$("#aioConceptName").change(function () {
 alert($("#aioConceptName :selected").attr('value'))
});


<select id="form-s" multiple="multiple">
 <option selected>city1</option>
 <option selected value="c2">city2</option>
 <option value="c3">city3</option>
</select> 
<select id="aioConceptName">
 <option value="s1" selected> choose io</option>
 <option value="s2">roma </option>
 <option value="s3">totti</option>
</select>
<select id="test">
 <option value="s4">paloma</option>
 <option value="s5" selected> foo</option>
 <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
 var a=$(':selected').text();//"city1city2choose iofoo"
 var b=$(':selected').val();//"city1" - selects just first query!
//but..
 var c=$(':selected').map(function(){//["city1","city2","choose io","foo"]
 return $(this).text();
 }); 
 var d=$(':selected').map(function(){//["city1","c2","s1","s5"]
 return $(this).val();
 });
 console.log(a,b,c,d);
});
</script>

对于那些发现最佳答案的人来说。

尝试使用:


 $("#aioConceptName option:selected" ).attr("value");

我在最近的项目中工作过,所以值得看看。

...