Question

嗨，我有一个带复选框的下拉菜单。下拉列表将是这样的： * 全选 * N1 * N2 * N3 * N4 我想默认选中所有复选框。但是当用户想要有选择地选择时，他/她必须取消选中所有将取消选中所有复选框的选项，然后他/她可以选择。

<select id="filter-select" multiple="multiple" >
        <option value="1">Select All</option>
        <option value="2">N1</option>
        <option value="3">N2</option>
        <option value="4">N3</option>
        <option value="5">N4</option>
        <option value="6">N5</option>
        <option value="7">N6</option>
 </select>

如何使用Javascript / JQuery执行此操作？

Answer 1

尝试将change处理程序与selectedIndex

一起使用

＆＃13;

$(function() {
  var filter = $('#filter-select');
  filter.on('change', function() {
    if (this.selectedIndex) return; //not `Select All`
    filter.find('option:gt(0)').prop('selected', true);
    filter.find('option').eq(0).prop('selected', false);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="filter-select" multiple="multiple">
  <option value="1">Select All</option>
  <option value="2">N1</option>
  <option value="3">N2</option>
  <option value="4">N3</option>
  <option value="5">N4</option>
  <option value="6">N5</option>
  <option value="7">N6</option>
</select>

＆＃13;

Answer 2

使用prop将所选内容设置为true，然后在选择器中选择#filter-select中的所有选项：

更新：

更新了片段以检查选择的更改事件中select（即SelectAll）中所选值是否为选项1，如果是，则选择所有选项并清除第一个选项的选择。

＆＃13;

selectAll();

$('#filter-select').change(function(){

  if($("#filter-select option[value='1']").is(':selected'))
  {
     selectAll();
  }

})

function selectAll()
{
   $('#filter-select option').prop('selected', true);
   $("#filter-select option[value='1']").prop('selected', false);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="filter-select" multiple="multiple" >
        <option value="1">Select All</option>
        <option value="2">N1</option>
        <option value="3">N2</option>
        <option value="4">N3</option>
        <option value="5">N4</option>
        <option value="6">N5</option>
        <option value="7">N6</option>
 </select>

＆＃13;

Answer 3

var selected=$('#filter-select option').prop('selected', true);
console.log(selected.text());
$('#filter-select').change(function(){
alert($('option:selected',this).text());

})

demo

再次选择时，只需获取新值

在Multiselect下拉列表中选择全部

3 个答案: