通常我使用$(“#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>
只有一种正确的方法来查找所选的选项-按选项值属性。就拿这段简单的代码来说:
//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的结果
所以使用值属性选择器,不要忘记为所有选项设置值属性!
JQuery:
如果你想要得到选定的选项文本,你可以使用$(select element).text()。
var text = $('#aioConceptName选项:selected').text();
如果你想要得到选定的选项值,你可以使用$(select element).val()。
var val = $('#aioConceptName选项:selected').val();
确保在<option>标签中设置value属性,如:
<选择id = " aioConceptName " >
<option value="">choose io</option> .
<选项值=“罗马(值)" >罗马(文本)< /选项>
<选项值= "托蒂(值)" >托蒂(文本)< /选项>
< /选择>
在这个HTML代码示例中,假设选择了最后一个选项:
Var text会给你totti(text)
Var val会给你totti(value)
美元(文档)。(“改变”,“# aioConceptName”功能(){
var val = $('#aioConceptName选项:selected').val();
var text = $('#aioConceptName选项: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 " > < /脚本>
<选择id = " aioConceptName " >
<选项值= " io(值)“>选择io > < /选项
<选项值=“罗马(值)" >罗马(文本)< /选项>
<选项值= "托蒂(值)" >托蒂(文本)< /选项>
< /选择>
< p class = "结果" > < / p >