通常我使用$("#id").val()返回所选选项的值，但这次它不起作用。所选标签具有 idaioConceptName
html代码
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>
问问题
1819930 次
33 回答
2087
对于下拉选项，您可能需要这样的内容：
var conceptName = $('#aioConceptName').find(":selected").text();
之所以val()没有成功，是因为单击选项不会更改下拉列表的值——它只是将属性添加到作为下拉列表子:selected项的选定选项中。
于 2012-05-18T20:14:40.857 回答
391
设置每个选项的值
<select id="aioConceptName">
<option value="0">choose io</option>
<option value="1">roma</option>
<option value="2">totti</option>
</select>
$('#aioConceptName').val()没有工作，因为.val()返回value属性。为了让它正常工作，value必须在每个<option>.
现在你可以打电话而不是其他人建议$('#aioConceptName').val()的所有这些巫术。:selected
于 2013-10-26T16:50:41.793 回答
197
我偶然发现了这个问题，并开发了 Elliot BOnneville 答案的更简洁版本：
var conceptName = $('#aioConceptName :selected').text();
或一般来说：
$('#id :pseudoclass')
这为您节省了额外的 jQuery 调用，一次选择所有内容，并且更清晰（我的观点）。
于 2012-11-01T17:16:20.640 回答
72
试试这个价值...
$("select#id_of_select_element option").filter(":selected").val();
或者这个作为文本......
$("select#id_of_select_element option").filter(":selected").text();
于 2013-02-27T08:54:52.123 回答
60
如果您在事件上下文中，在 jQuery 中，您可以使用 : 检索选定的选项元素，
$(this).find('option:selected')如下所示：
$('dropdown_selector').change(function() {
//Use $option (with the "$") to see that the variable is a jQuery object
var $option = $(this).find('option:selected');
//Added with the EDIT
var value = $option.val();//to get content of "value" attrib
var text = $option.text();//to get <option>Text</option> content
});
编辑
正如PossessWithin所提到的，我的回答只是回答这个问题：如何选择选定的“选项”。
接下来，要获取选项值，请使用option.val().
于 2013-07-09T15:30:46.407 回答
39
您是否考虑过使用普通的旧 javascript？
var box = document.getElementById('aioConceptName');
conceptName = box.options[box.selectedIndex].text;
于 2013-05-08T18:18:32.537 回答
30
$('#aioConceptName option:selected').val();
于 2013-11-26T23:25:58.120 回答
17
读取选择的值（不是文本）：
var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();
如何禁用选择？ 在这两种变体中，可以使用以下方法更改值：
一种
用户无法与下拉列表交互。而且他不知道可能存在哪些其他选择。
$('#Status').prop('disabled', true);
乙
用户可以在下拉列表中看到选项，但所有选项都被禁用：
$('#Status option').attr('disabled', true);
在这种情况下，$("#Status").val() 仅适用于小于1.9.0. 所有其他变体都可以使用。
如何更新禁用的选择？
从后面的代码中，您仍然可以更新选择中的值。它仅对用户禁用：
$("#Status").val(2);
在某些情况下，您可能需要触发事件：
$("#Status").val(2).change();
于 2017-06-01T15:38:27.333 回答
15
你应该使用这个语法：
var value = $('#Id :selected').val();
所以试试这个代码：
var values = $('#aioConceptName :selected').val();
您可以在 Fiddle 中进行测试：http: //jsfiddle.net/PJT6r/9/
在这篇文章中看到这个答案
于 2018-10-02T14:06:18.950 回答
15
对于良好的做法，您需要使用val()来获取所选选项的价值 not text()。
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
<option value="choose">choose io</option>
</select>
您可以使用
$("#aioConceptName").find(':selected').val();
或者
$("#aioConceptName :selected").val();
于 2019-03-10T10:09:55.627 回答
14
要使用 jQuery 找到正确的选择，请考虑在 html 树中可以使用多个选择并混淆您的预期输出。
(:selected).val()或在多个选择选项上(:selected).text()无法正常工作。因此，我们首先保留所有选择的数组，.map()然后返回所需的参数或文本。
以下示例说明了这些问题并提供了更好的方法
<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>
与正确工作的c & d相比，在变体a、b中查看不同的容易出错的输出，将所有选择保存在一个数组中，然后返回您要查找的内容。
于 2013-04-25T01:07:45.130 回答
11
使用 jQuery，只需添加一个change事件并在该处理程序中获取选定的值或文本。
如果您需要选定的文本，请使用此代码：
$("#aioConceptName").change(function () {
alert($("#aioConceptName :selected").text())
});
或者，如果您需要选择值，请使用以下代码：
$("#aioConceptName").change(function () {
alert($("#aioConceptName :selected").attr('value'))
});
于 2014-07-22T10:15:27.580 回答
11
使用jQuery：
如果要获取选中的选项文本，可以使用
$(select element).text().var text = $('#aioConceptName option:selected').text();如果要获取选定的选项值，可以使用
$(select element).val().var val = $('#aioConceptName option:selected').val();确保在标签中设置
value属性，例如：<option><select id="aioConceptName"> <option value="">choose io</option> <option value="roma(value)">roma(text)</option> <option value="totti(value)">totti(text)</option> </select>
使用此 HTML 代码示例，假设选择了最后一个选项：
- var text会给你
totti(text) - var val会给你
totti(value)
$(document).on('change','#aioConceptName' ,function(){
var val = $('#aioConceptName option:selected').val();
var text = $('#aioConceptName option:selected').text();
$('.result').text("Select Value = " + val);
$('.result').append("<br>Select Text = " + text);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="aioConceptName">
<option value="io(value)">choose io</option>
<option value="roma(value)">roma(text)</option>
<option value="totti(value)">totti(text)</option>
</select>
<p class="result"></p>于 2021-02-01T09:58:56.527 回答
10
也使用jQuery.val()选择元素的功能：
.val() 方法主要用于获取输入、选择和文本区域等表单元素的值。在 select 元素的情况下，
null当没有选择选项时返回，当至少有一个选项时返回一个包含每个选定选项的值的数组，并且可以选择更多，因为multiple存在属性。
$(function() {
$("#aioConceptName").on("change", function() {
$("#debug").text($("#aioConceptName").val());
}).trigger("change");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>
<div id="debug"></div>于 2015-02-08T14:50:07.383 回答
10
要获取所选标签的值：
$('#id_Of_Parent_Selected_Tag').find(":selected").val();
如果您想获取文本，请使用以下代码：
$('#id_Of_Parent_Selected_Tag').find(":selected").text();
例如：
<div id="i_am_parent_of_select_tag">
<select>
<option value="1">CR7</option>
<option value="2">MESSI</option>
</select>
</div>
<script>
$('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
$('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
于 2019-04-30T03:31:56.010 回答
9
对于任何发现最佳答案的人都不起作用。
尝试使用：
$( "#aioConceptName option:selected" ).attr("value");
在最近的项目中为我工作，所以值得一看。
于 2014-01-29T12:37:54.777 回答
9
只是这应该工作：
var conceptName = $('#aioConceptName').val();
于 2014-11-17T13:44:39.310 回答
9
直截了当而且很简单：
您的下拉菜单
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>
jquery代码获取选定的值
$('#aioConceptName').change(function() {
var $option = $(this).find('option:selected');
//Added with the EDIT
var value = $option.val(); //returns the value of the selected option.
var text = $option.text(); //returns the text of the selected option.
});
于 2018-11-21T09:02:53.090 回答
5
我希望这也有助于更好地理解并帮助在下面尝试这个，
$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
options2[$(this).val()] = $(this).text();
console.log(JSON.stringify(options2));
});
有关更多详细信息，请 http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/
于 2017-07-30T14:31:40.417 回答
5
您可以尝试以这种方式调试它：
console.log($('#aioConceptName option:selected').val())
于 2018-07-27T11:45:49.560 回答
4
如果你想获取 'value' 属性而不是文本节点，这对你有用：
var conceptName = $('#aioConceptName').find(":selected").attr('value');
于 2016-10-27T00:17:47.453 回答
4
这是此问题的简单解决方案。
$("select#aioConceptName").change(function () {
var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
console.log(selectedaioConceptName);
});
于 2020-01-04T16:40:40.107 回答
3
试试这个
$(document).ready(function() {
$("#name option").filter(function() {
return $(this).val() == $("#firstname").val();
}).attr('selected', true);
$("#name").live("change", function() {
$("#firstname").val($(this).find("option:selected").attr("value"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name">
<option value="">Please select...</option>
<option value="Elvis">Elvis</option>
<option value="Frank">Frank</option>
<option value="Jim">Jim</option>
</select>
<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">
于 2017-11-15T00:45:45.717 回答
3
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);
将 DDL 想象成一个带有索引的数组，您正在选择一个索引。选择你想用你的 JS 设置的那个。
于 2019-06-10T10:13:29.737 回答
2
您可以使用$("#drpList").val();
于 2018-01-21T22:50:13.137 回答
2
要获取具有相同类 = 名称的选择，您可以这样做，以检查是否选择了选择选项。
var bOK = true;
$('.optKategorien').each(function(index,el){
if($(el).find(":selected").text() == "") {
bOK = false;
}
});
于 2018-09-26T11:17:02.987 回答
2
我遇到了同样的问题，我弄清楚为什么它不适用于我的案例
html 页面分为不同的 html 片段，我发现我有另一个带有相同 Id 的输入字段select，这导致val()始终为空
我希望这可以为任何有类似问题的人节省一天的时间。
于 2019-01-28T07:29:22.827 回答
2
尝试
aioConceptName.selectedOptions[0].value
let val = aioConceptName.selectedOptions[0].value
console.log('selected value:',val);<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>于 2020-06-21T17:43:06.863 回答
2
只有一种正确的方法可以找到选定的选项 - 按option value属性。所以采取简单的代码：
//find selected option
$select = $("#mySelect");
$selectedOption = $select.find( "option[value=" + $select.val() + "]" );
//get selected option text
console.log( $selectedOption.text() );
因此，如果您有这样的列表：
<select id="#mySelect" >
<option value="value1" >First option</option>
<option value="value2" >Second option</option>
<option value="value3" selected >Third option</option>
</select>
如果您使用selected属性 for option，那么find(":selected")将给出不正确的结果，因为selected属性将option永远保持不变，即使用户选择了另一个选项。
即使用户选择第一个或第二个选项，$("select option:selected") 的结果也会给出两个元素！所以 $("select :selected").text() 会给出类似“第一个选项第三个选项”的结果
所以使用value属性选择器，不要忘记value为所有选项设置属性！
于 2021-05-17T04:54:02.013 回答
1
对于这种情况，您最好的选择可能是使用jQuery 的 change 方法来查找当前选择的值，如下所示：
$('#aioConceptName').change(function(){
//get the selected val using jQuery's 'this' method and assign to a var
var selectedVal = $(this).val();
//perform the rest of your operations using aforementioned var
});
我更喜欢这种方法，因为您可以在给定的选择字段中为每个选定的选项执行功能。
希望有帮助！
于 2018-04-03T08:03:28.927 回答
1
通常，您不仅需要获取选定的值，还需要运行一些操作。那么为什么不避免所有的 jQuery 魔法，而只是将选定的值作为参数传递给操作调用呢？
<select onchange="your_action(this.value)">
<option value='*'>All</option>
<option ... />
</select>
于 2018-05-08T12:40:17.140 回答
1
您可以使用精确选择的选项进行选择：下面将给出 innerText
$("select#aioConceptName > option:selected").text()
虽然下面会给你价值。
$("select#aioConceptName > option:selected").val()
于 2018-07-11T05:55:14.300 回答
1
试试这个代码::)
获取价值：
$("#Ostans option:selected").val() + '.' + $("#shahrha option:selected").val()
获取文本：
$("#Ostans option:selected").text() + '.' + $("#shahrha option:selected").text()
于 2020-09-07T06:35:47.540 回答