在多個選擇組合框中循環選定值JQuery

Question

我有以下情形。

我有一個組合框，其中有多個選擇可用。

   <select id="a" multiple="multiple"> 
        <option value="">aaaa</option> 
        <option value="">bbbb</option> 
        <option value="">cccc</option> 
        <option value="">dddd</option> 
       </select> 

現在我也有一個按鈕

<button type="button" id="display">Display</button> 

當此按鈕，用戶點擊，它應該列出一個警告框的下拉的所有選定值

我的JS代碼如下如下

$(document).ready(function() { 
       $('#display').click(function(){ 
        alert($('#a').val()); 
       }); 


     }); 

任何指針將不勝感激

Answer 1

你必須找到所有選定的選項：

jQuery(function($) { 
    $('#display').click(function() { 
     $('#a > :selected').each(function() { 
      alert($(this).text()); // using text() here, because the 
     });       // options have no value..? 
    }); 
}); 

---

手冊，作爲皮姆指出的那樣，是有用的：

的.VAL（）方法主要用於獲取表單元素的值。對於<select multiple="multiple">元素，.val()方法將返回一個包含每個選定選項的數組。

因此，上述應該工作，但jQuery的已經這樣做了的場景，在你身後，所以這是很容易：

alert($('#a').val().join(", ")); 

如果它不爲你工作，這可能是因爲事實上你的選擇似乎沒有價值。

Answer 2

jQuery的頁面字面上記錄了.VAL（）函數告訴你該怎麼做：http://api.jquery.com/val/

Answer 3

你試過each()？

Answer 4

關於下面的演示箱，我已經做了上述問題的東西。

演示：http://codebins.com/bin/4ldqp9w

HTML：

<select id="a" multiple="multiple"> 
    <option value=""> 
    aaaa 
    </option> 
    <option value=""> 
    bbbb 
    </option> 
    <option value=""> 
    cccc 
    </option> 
    <option value=""> 
    dddd 
    </option> 
    <option value=""> 
    eeee 
    </option> 
    <option value=""> 
    ffff 
    </option> 
    <option value=""> 
    gggg 
    </option> 
</select> 
<div id='result'> 
</div> 

<p> 
    <button type="button" id="display"> 
    Display 
    </button> 
</p> 
<p> 
    <button type="button" id="reset"> 
    Reset 
    </button> 
</p> 

CSS：

#a{ 
    display:inline-block; 
} 
#result{ 
    display:inline-block; 
} 

JQuery的：

$(document).ready(function() { 
    $('#display').click(function() { 

     var result = ''; 
     $('#a > :selected').each(function() { 
      result += "<div>" + $(this).text() + "</div>"; 
     }); 
     if (result == "") { 
      result = "<div>Please select any option(s)..!</div>"; 
     } 
     $("#result").html(result); 

    }); 
    $('#reset').click(function() { 
     $('#a > :selected').each(function() { 
      $(this).removeAttr('selected'); 
     }); 
     $("#result").html(''); 

    }); 
});