通常我使用$(“#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找到正确的选择,请考虑在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>

在变体a, b中,与正确工作的c和d相比,它将所有选择保存在数组中,然后返回您所寻找的内容,从而看到不同的容易出现错误的输出。

其他回答

对于良好的实践,您需要使用val()来获取所选选项的值,而不是text()。

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

你可以使用

   $("#aioConceptName").find(':selected').val();

Or

   $("#aioConceptName :selected").val();

为每个选项设置值

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

$('#aioConceptName').val()不起作用,因为.val()返回value属性。要使其正常工作,必须在每个<option>上设置值属性。

现在你可以调用$('#aioConceptName').val()而不是这一切:选择巫毒是由其他人建议。

要获取具有相同class= name的select,您可以这样做,以检查选择选项是否被选中。

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});

也可以使用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>

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

//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的结果

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