jQuery从下拉列表中获取选定的选项-Java 学习之路

942

通常我使用 $("#id").val() 来返回所选选项的值，但这次它不起作用 . 所选标签的ID为 aioConceptName

html code

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

24 回答

尝试这个

$(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">

回复于 2024-04-25T16:27:56+08:00

如果您在事件上下文中，则在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

如PossessWithin所述，我的回答只是回答问题：如何选择"Option" .

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

回复于 2024-04-25T16:27:56+08:00

17
Reading the value (not the text) of a select:
```
var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();
```
How to disable a select? 在两个变体中，可以使用以下值更改值：

A

用户无法与下拉列表进行交互 . 他不知道可能存在哪些其他选择 .
```
$('#Status').prop('disabled', true);
```
B

用户可以在下拉列表中看到选项，但所有选项都被禁用：
```
$('#Status option').attr('disabled', true);
```
在这种情况下，对于小于 1.9.0 的jQuery版本， $("#Status").val() will only work . 所有其他变体都可以使用 .

How to update a disabled select?

从后面的代码中，您仍然可以更新选择中的值 . 它仅对用户禁用：
```
$("#Status").val(2);
```
在某些情况下，您可能需要触发事件：
```
$("#Status").val(2).change();
```
回复于 2024-04-25T16:27:56+08:00
4
使用jQuery，只需添加 change 事件并在该处理程序中获取选定的值或文本 .

如果您需要选择的文字，请使用以下代码：
```
$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});
```
或者如果您需要选择的值，请使用以下代码：
```
$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});
```
回复于 2024-04-25T16:27:56+08:00
11
我偶然发现了这个问题并开发了一个更简洁的版本Elliot BOnneville的答案：
```
var conceptName = $('#aioConceptName :selected').text();
```
或者一般地说：
```
$('#id :pseudoclass')
```
这为您节省了额外的jQuery调用，一次性选择所有内容，并且更清晰（我的观点） .
回复于 2024-04-25T16:27:56+08:00

试试这个值......

$("select#id_of_select_element option").filter(":selected").val();

或者这个用于文字......

$("select#id_of_select_element option").filter(":selected").text();

回复于 2024-04-25T16:27:56+08:00

10
如果你想获取'value'属性而不是文本节点，这将适合你：
```
var conceptName = $('#aioConceptName').find(":selected").attr('value');
```
回复于 2024-04-25T16:27:56+08:00
0
这应该工作：
```
var conceptName = $('#aioConceptName').val();
```
回复于 2024-04-25T16:27:56+08:00
8
对选择元素也使用jQuery.val()函数：

.val（）方法主要用于获取表单元素的值，例如input，select和textarea . 在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>
```
回复于 2024-04-25T16:27:56+08:00
9
你应该使用这种语法：
```
var value = $('#Id :selected').val();
```
所以试试这个代码：
```
var values = $('#aioConceptName :selected').val();
```
你可以在小提琴中测试：http://jsfiddle.net/PJT6r/9/

在this post看到这个答案
回复于 2024-04-25T16:27:56+08:00
0

我希望这也有助于更好地理解并帮助尝试下面这个， $('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/

回复于 2024-04-25T16:27:56+08:00

$('#aioConceptName option:selected').val();

回复于 2024-04-25T16:27:56+08:00

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

回复于 2024-04-25T16:27:56+08:00

1589
对于那些发现最佳答案不起作用的人 .

尝试使用：
```
$( "#aioConceptName option:selected" ).attr("value");
```
在最近的项目中对我有用，所以值得一看 .
回复于 2024-04-25T16:27:56+08:00
2
您可以使用精确选择的选项进行选择：下面将给出innerText
```
$("select#aioConceptName > option:selected").text()
```
虽然下面会给你 Value .
```
$("select#aioConceptName > option:selected").val()
```
回复于 2024-04-25T16:27:56+08:00
-1
Set the values for each of the options
```
<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> 上设置 value 属性 .

现在你可以打电话给 $('#aioConceptName').val() 而不是其他人建议的所有 :selected 巫毒 .
回复于 2024-04-25T16:27:56+08:00
289
你考虑过使用普通的旧javascript吗？
```
var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;
```
另见Getting an option text/value with JavaScript
回复于 2024-04-25T16:27:56+08:00
2
通常，您不仅需要获取所选值，还需要执行某些操作 . 那么为什么不避免所有的jQuery魔法，只是将选定的值作为参数传递给动作调用？
```
<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>
```
回复于 2024-04-25T16:27:56+08:00

直截了当，非常简单：

你的下拉菜单

<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.
});

回复于 2024-04-25T16:27:56+08:00

144
对于下拉选项，您可能需要以下内容：
```
var conceptName = $('#aioConceptName').find(":selected").text();
```
val() 不会更改下拉列表的值的原因 - 它只是将 :selected 属性添加到所选选项，该选项是下拉列表的子项 .
回复于 2024-04-25T16:27:56+08:00
0
要获取具有相同class = name的select，您可以执行此操作，以检查是否选择了select选项 .
```
var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});
```
回复于 2024-04-25T16:27:56+08:00
8
您可以尝试以这种方式调试它：
```
console.log($('#aioConceptName option:selected').val())
```
回复于 2024-04-25T16:27:56+08:00
0

你可以用 $("#drpList").val();

回复于 2024-04-25T16:27:56+08:00
5
对于这种情况，您最好的选择是使用jQuery's change method来查找当前选定的值，如下所示：
```
$('#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

});
```
我更喜欢这种方法，因为您可以在给定的选择字段中为每个选定的选项执行功能 .

希望有所帮助！
回复于 2024-04-25T16:27:56+08:00

jQuery从下拉列表中获取选定的选项

24 回答

相关问题