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

2020/09/18 10:31 · javascript ·  · 0评论

通常,我使用它$("#id").val()来返回所选选项的值,但这一次它不起作用。所选标签的IDaioConceptName

HTML代码

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

对于下拉选项,您可能想要这样的东西:

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

之所以val()不能解决问题,是因为单击一个选项不会更改下拉菜单的值,它只是将:selected属性添加作为下拉菜单项的所选选项中

设置每个选项的值

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

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

现在,您可以打电话$('#aioConceptName').val()代替:selected别人建议的所有教。

我偶然发现了这个问题,并开发了一个更为简洁的Elliot BOnneville答案:

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

或一般而言:

$('#id :pseudoclass')

这样可以节省您额外的jQuery调用,一次即可选择所有内容,而且更加清晰(我认为)。

尝试此物有所值...

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

或这个文本...

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

如果您处于事件上下文中,则在jQuery中,可以使用:来检索所选的option元素,
$(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
});

编辑

PossessWithin所述,我的回答只是回答以下问题:如何选择选定的“选项”。

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

您是否考虑过使用普通的旧JavaScript?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

另请参阅使用JavaScript获取选项文本/值

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

读取选择的值(而不是文本):

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

如何禁用选择?
在这两种变体中,都可以使用以下方法更改值:

一个

用户无法与下拉列表互动。而且他不知道还有其他选择。

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

用户可以在下拉菜单中看到这些选项,但所有选项均被禁用:

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

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

如何更新禁用的选择?

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

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

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

$("#Status").val(2).change();
<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>

您应该使用以下语法:

var value = $('#Id :selected').val();

因此,请尝试以下代码:

var values = $('#aioConceptName :selected').val();

您可以在Fiddle中进行测试:http//jsfiddle.net/PJT6r/9/

这篇文章中看到这个答案

使用jQuery,只需添加一个change事件并在该处理程序中获取选定的值或文本即可。

如果您需要选择的文本,请使用以下代码:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

或者,如果您需要选择的值,请使用以下代码:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

也将jQuery.val()函数用于选择元素:

.val()方法主要用于获取表单元素(例如输入,选择和文本区域)的值。对于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>

对于任何发现最佳答案的人都行不通。

尝试使用:

  $( "#aioConceptName option:selected" ).attr("value");

在最近的项目中为我工作,因此值得一看。

只是这应该工作:

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

直截了当,非常简单:

您的下拉菜单

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

为了获得所选标签的价值

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

您可以尝试通过以下方式对其进行调试:

console.log($('#aioConceptName option:selected').val())

我希望这也可以帮助您更好地了解并在下面进行尝试,

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

如果您想获取'value'属性而不是文本节点,那么它将为您工作:

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

尝试这个

$(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">
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

想象一下DDL是一个带有索引的数组,您正在选择一个索引。选择要与JS一起设置的对象。

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

要获取具有相同类名的选择,可以执行此操作,以检查是否选择了选择选项。

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

我遇到了同样的问题,并且弄清楚了为什么它无法在我的案例中

使用。html页面被分为不同的html片段,我发现我还有另一个输入字段带有相同的ID
select,这导致val()始终为空

我希望这可以为有类似问题的任何人节省一天的时间。

要使用$(“#id”)。val,应在选项中添加一个值,如下所示:

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

否则,您可以使用

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

希望对您有所帮助。

这是此问题的简单解决方案。

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

尝试

aioConceptName.selectedOptions[0].value

在这种情况下,您最好的选择是使用jQuery的change方法来查找当前选定的值,如下所示:

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

});

我更喜欢这种方法,因为您可以在给定的选择字段中为每个选定的选项执行功能。

希望有帮助!

通常,您不仅需要获取选定的值,还需要执行一些操作。那么,为什么不避免使用所有jQuery魔术,而只是将所选值作为参数传递给action调用呢?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>

您可以使用精确选择的选项进行选择:下面将给出innerText

$("select#aioConceptName > option:selected").text()

虽然下面将为您带来价值。

$("select#aioConceptName > option:selected").val()
本文地址:http://javascript.askforanswer.com/jquerycongxialaliebiaozhonghuoquxuandingdexuanxiang.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!