csdnceshi73
喵-见缝插针
采纳率0%
2012-05-18 20:11

从下拉菜单中选择

Usually I use $("#id").val() to return the value of the selected option, but this time it doesn't work. The selected tag has the 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>

转载于:https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

22条回答

  • csdnceshi62 csdnceshi62 9年前

    For dropdown options you probably want something like this:

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

    The reason val() doesn't do the trick is because clicking an option doesn't change the value of the dropdown--it just adds the :selected property to the selected option which is a child of the dropdown.

    点赞 21 评论 复制链接分享
  • csdnceshi73 喵-见缝插针 8年前

    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() didn't work because .val() returns the value attribute. To have it work properly, the value attributes must be set on each <option>.

    Now you can call $('#aioConceptName').val() instead of all this :selected voodoo being suggested by others.

    点赞 30 评论 复制链接分享
  • csdnceshi72 谁还没个明天 9年前

    I stumbled across this question and developed a more concise version of Elliot BOnneville's answer:

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

    or generically:

    $('#id :pseudoclass')
    

    This saves you an extra jQuery call, selects everything in one shot, and is more clear (my opinion).

    点赞 25 评论 复制链接分享
  • csdnceshi65 larry*wei 3年前

    you should use this syntax:

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

    So try this Code:

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

    you can test in Fiddle: http://jsfiddle.net/PJT6r/9/

    see about this answer in this post

    点赞 10 评论 复制链接分享
  • weixin_41568127 ?yb? 7年前

    For anyone who found out that best answer don't work.

    Try to use:

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

    Works for me in recent projects so it is worth to look on it.

    点赞 10 评论 复制链接分享
  • csdnceshi58 Didn"t forge 8年前

    If you are in event context, in jQuery, you can retrieve the selected option element using :
    $(this).find('option:selected') like this :

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

    As mentioned by PossessWithin, My answer just answer to the question : How to select selected "Option".

    Next, to get the option value, use option.val().

    点赞 10 评论 复制链接分享
  • csdnceshi78 程序go 8年前

    Try this for value...

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

    or this for text...

    $("select#id_of_select_element option").filter(":selected").text();
    
    点赞 9 评论 复制链接分享
  • weixin_41568110 七度&光 4年前

    I hope this also helps to understand better and helps try this below, $('select[id="aioConceptName[]"] option:selected').each(function(key,value){ options2[$(this).val()] = $(this).text(); console.log(JSON.stringify(options2)); });
    to more details please http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

    点赞 8 评论 复制链接分享
  • csdnceshi56 lrony* 7年前

    Using jQuery, just add a change event and get selected value or text within that handler.

    If you need selected text, please use this code:

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

    Or if you need selected value, please use this code:

    $("#aioConceptName").change(function () {
        alert($("#aioConceptName :selected").attr('value'))
    });
    
    点赞 8 评论 复制链接分享
  • csdnceshi78 程序go 7年前

    Just this should work:

    var conceptName = $('#aioConceptName').val();
    
    点赞 7 评论 复制链接分享
  • weixin_41568184 叼花硬汉 8年前
    $('#aioConceptName option:selected').val();
    
    点赞 6 评论 复制链接分享
  • csdnceshi69 YaoRaoLov 4年前

    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? in both variants, value can be changed using:

    A

    User can not interact with the dropdown. And he doesn't know what other options might exists.

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

    B

    User can see the options in the dropdown but all of them are disabled:

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

    In this case, $("#Status").val() will only work for jQuery versions smaller than 1.9.0. All other variants will work.

    How to update a disabled select?

    From code behind you can still update the value in your select. It is disabled only for users:

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

    In some cases you might need to fire events:

    $("#Status").val(2).change();
    
    点赞 6 评论 复制链接分享
  • weixin_41568127 ?yb? 8年前
    <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>
    
    点赞 6 评论 复制链接分享
  • csdnceshi60 ℡Wang Yan 5年前

    If you want to grab the 'value' attribute instead of the text node, this will work for you:

    var conceptName = $('#aioConceptName').find(":selected").attr('value');
    
    点赞 6 评论 复制链接分享
  • csdnceshi63 elliott.david 3年前

    You can try to debug it this way:

    console.log($('#aioConceptName option:selected').val())
    
    点赞 3 评论 复制链接分享
  • csdnceshi67 bug^君 4年前

    try to this one

    $(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">
    
    点赞 1 评论 复制链接分享
  • weixin_41568174 from.. 8年前

    Have you considered using plain old javascript?

    var box = document.getElementById('aioConceptName');
    
    conceptName = box.options[box.selectedIndex].text;
    

    See also Getting an option text/value with JavaScript

    点赞 1 评论 复制链接分享
  • csdnceshi73 喵-见缝插针 3年前

    Probably your best bet with this kind of scenario is to use jQuery's change method to find the currently selected value, like so:

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

    I prefer this method because you can then perform functions for each selected option in a given select field.

    Hope that helps!

    点赞 评论 复制链接分享
  • weixin_41568183 零零乙 3年前

    You can select using exact selected option : Below will give innerText

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

    While below will give you value.

    $("select#aioConceptName > option:selected").val()
    
    点赞 评论 复制链接分享
  • weixin_41568196 撒拉嘿哟木头 3年前

    Usually you'd need to not only get the selected value, but also run some action. So why not avoid all the jQuery magic and just pass the selected value as an argument to the action call?

    <select onchange="your_action(this.value)">
       <option value='*'>All</option>
       <option ... />
    </select>
    
    点赞 评论 复制链接分享
  • csdnceshi53 Lotus@ 3年前

    You can use $("#drpList").val();

    点赞 评论 复制链接分享
  • csdnceshi57 perhaps? 3年前

    to fetch a select with same class= name you could do this, to check if a select option is selected.

    var bOK = true;
    $('.optKategorien').each(function(index,el){
        if($(el).find(":selected").text() == "") {
            bOK = false;
        }
    });
    
    点赞 评论 复制链接分享

相关推荐