如何从下拉列表中选择多个值?我正在使用Bootstrap css版本3

时间:2015-07-09 09:17:27

标签: javascript jquery html css twitter-bootstrap

我需要从下拉列表中选择多个值。我正在使用bootstrap css。

这是我的下拉代码:

  <select multiple class="dropdown-menu">
        <option value="monday">Monday</option>
        <option value="tuesday">Tuesday</option>
        <option value="wednesday">Wednesday</option>
        <option value="thursday">Thursday</option>
        <option value="friday">Friday</option>
        <option value="saturday">Saturday</option>
        <option value="sunday">Sunday</option>
    </select>

通过使用上面的代码,我可以使用CTRL键选择多个选项,但我不想使用ctrl键,我需要选择多个值。

是否可以使用jquery,javascript做到这一点?

还有一件事我可以选择不超过两个或三个值吗?

非常感谢...

3 个答案:

答案 0 :(得分:2)

这是没有ctrl单击的一种方法。

&#13;
&#13;
$('option').mousedown(function(e) {
e.preventDefault();	

$(this).prop('selected', $(this).prop('selected') ? false : true);

alert($("#mySelect :selected").length);//select option selected count
//if($("#mySelect :selected").length==2)
//some stuff
   
return false;
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="mySelect">
    <option id="1">Option</option>
    <option id="2">Option</option>
    <option id="3">Option</option>
    <option id="4">Option</option>
</select>
&#13;
&#13;
&#13;

See this link.

答案 1 :(得分:1)

$('.dropdown-menu option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

答案 2 :(得分:0)

你可以使用插件来下载“Multiselect”/“selected” 1. http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/ 2. https://harvesthq.github.io/chosen/