通常我使用$(“#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').find(":selected").text();

对于所选值

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

val()没有做到这一点的原因是,单击一个选项并不会改变下拉列表的值——它只是将:selected属性添加到作为下拉列表子项的selected选项中。

要用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相比,它将所有选择保存在数组中,然后返回您所寻找的内容,从而看到不同的容易出现错误的输出。

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

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

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

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

或一般:

$('#id :pseudoclass')

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

如果你在事件上下文中,在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
});

Edit

正如possession within所提到的,我的答案只是回答这个问题:如何选择所选的“选项”。

接下来,要获取选项值,使用option.val()。