在multiselect中如何使用jquery获取单击的值

时间:2015-06-01 10:56:22

标签: javascript jquery html

多选选项i仅使用jquery获取Clicked值。

$(document).ready(function() {
  $("#mySelect").change(function() {

    var firstselected = $(':selected', this).val(); //returns first selected in list
    var lastselected = $(':selected:last', this).val(); //return last selected in list
    alert(firstselected);
    alert(lastselected);
    // what if i want exact option i have clicked in list 
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect" class="selectpicker" multiple>
  <option>Option1</option>
  <option>Option2</option>
  <option>Option3</option>
  <option>Option4</option>
  <option>Option5</option>
  <option>Option6</option>
  <option>Option7</option>
</select>

var firstselected = $(':selected', this).val();//this returns first selected in list
var lastselected = $(':selected:last', this).val();//this return last selected in list 

如果我想要确切的选项我点击了列表是否在所选选项列表的中间

3 个答案:

答案 0 :(得分:1)

您可以同时获得所有选定值和当前选定值

$("#mySelect option").click(function (e) {

    var all = $("#mySelect :selected").map(function () {
        return this.value;

    }).get();  // all selected value

    if (all.indexOf(this.value) != -1) {  // check the condition your selecting or unselected  option
        alert(this.value);  // current selected element
    }

});

注意:您可以使用所有变量获取所有选定的值,并且您也可以获得当前选定的值

<强> DEMO

答案 1 :(得分:0)

您还需要在option上绑定事件:

$("#mySelect").on("click", "option", function () {
    console.log($(this)); //this will log the clicked option.
});

演示:http://jsfiddle.net/lotusgodkk/GCu2D/725/

答案 2 :(得分:0)

您可以使用以下解决方案获得点击值:

$("#mySelect").on('change', function(e) {
  e.currentTarget.value  //should return you the currently selected option
});