通常我使用$(“#id”).val()来返回所选选项的值,但这一次它不起作用。 所选标记的id为aioConceptName

html代码

<label for="name">Name</label>
<input type="text" name="name" id="name" />

<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

当前回答

也可以使用jQuery.val()函数来选择元素:

.val()方法主要用于获取表单元素的值 如输入,选择和文本区域。对于选择元素,它 返回null,当没有选择任何选项时,返回一个包含 当至少有一个并且是时,每个所选选项的值 可以选择更多,因为存在多个属性。

$(函数() { $(“#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>选择io</option> <option>罗马</option> <option>托蒂</option> </select> <div id=“debug”></div>

其他回答

我无意中发现了这个问题,并将埃利奥特·博纳维尔的答案简化为:

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

或一般:

$('#id :pseudoclass')

这节省了额外的jQuery调用,在一个镜头中选择所有内容,并且更加清晰(我的观点)。

只有一种正确的方法来查找所选的选项-按选项值属性。就拿这段简单的代码来说:

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

如果您使用所选属性作为选项,那么find(“:selected”)将给出不正确的结果,因为所选属性将永远停留在选项中,即使用户选择了另一个选项。

即使用户选择第一个或第二个选项,$("select option:selected")的结果也会给出两个元素!因此$("select:selected").text()会给出类似First option Third option的结果

所以使用值属性选择器,不要忘记为所有选项设置值属性!

这样就可以了:

var conceptName = $('#aioConceptName').val();

功能(美元){ # aioConceptName’(美元)。上(“改变”,功能) 控制台日志(事件。类型+“活动”:$ .val(); (这个美元)。prev“输入”)。瓦尔((这)。瓦尔(美元); }); }); <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / > < >标签名,< - >标签 <输入类型=“文本” 选择< id =“aioConceptName > < < / lo选项>选择选项> <罗马选项> < /选项> <选项> totti < /选项> 选择< - >

读取select对象的值(而不是文本):

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

如何禁用选择? 在这两个变量中,value可以使用以下命令更改:

A

用户无法与下拉菜单进行交互。他不知道还有什么其他选择。

$('#Status').prop('disabled', true);

B

用户可以在下拉菜单中看到选项,但所有选项都是禁用的:

$('#Status option').attr('disabled', true);

在这种情况下,$("#Status").val()只适用于小于1.9.0的jQuery版本。所有其他变体都可以工作。

如何更新一个禁用的选择?

从后面的代码中,您仍然可以更新您选择的值。仅对用户禁用:

$("#Status").val(2);

在某些情况下,你可能需要触发事件:

$("#Status").val(2).change();

获取所选标签的值:

 $('#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>