如何在bootstrap multiselect中处理onclick事件?

时间:2014-09-24 10:00:46

标签: javascript html bootstrap-multiselect

我有一个下拉列表,我添加了bootstrap multiselect。

            <select id="selectoption" multiple="multiple">
              <option value="opt1">All</option>
              <option value="opt2">all_content1</option>
              <option value="opt2">all_content1</option>
              <option value="opt3">all_content1</option>
              <option value="opt4">all_content1</option>
              <option value="opt5">all_content1</option>
              <option value="opt6">all_content1</option>
              <option value="opt7">all_content1</option>
              <option value="opt8">all_content1</option>
              <option value="opt9">separate_content1</option>
              <option value="opt10">separate_content2</option>
            </select>

我添加了这样的多选,

$("#selectoption").multiselect();

在bootstrap multiselect中,他们有自己的select all选项,我不想在这里使用它。我想要“select-all”逻辑,将选择切换为“opt8”。请帮忙。

2 个答案:

答案 0 :(得分:0)

也许您可以使用optgroup对数据进行分组,每个optgroup都有一个特定的ID或类。 之后,更容易选择一个或多个optgroup的所有元素。

或者只为所有选项或optgroup添加一个“selectall”类,该类必须由select_all函数处理。

<select id="selectoption" multiple="multiple">
          <option value="opt1">All</option>
          <optgroup class="selectall" label="Group 1">
              <option value="opt2">all_content1</option>
              <option value="opt2">all_content1</option>
              <option value="opt3">all_content1</option>
              <option value="opt4">all_content1</option>
              <option value="opt5">all_content1</option>
              <option value="opt6">all_content1</option>
              <option value="opt7">all_content1</option>
              <option value="opt8">all_content1</option>
          </optgroup>
          <optgroup label="Group 2">
              <option value="opt9">separate_content1</option>
              <option value="opt10">separate_content2</option>
          </optgroup>
          <optgroup class="selectall" label="Group 3">
              <option value="opt9">separate_content1</option>
              <option value="opt10">separate_content2</option>
          </optgroup>
        </select>

此致

答案 1 :(得分:0)

如果您想要选择所有可能的逻辑,则可以选择所有逻辑:

  $('#selectoption option').attr('selected', true);

但正如您所要求的,您的代码将点击 所有

&#13;
&#13;
$('option').click(function(){  
    if($(this).val()=="opt1")      
        $("#selectoption").val(["opt2","opt3","opt4","opt5","opt6","opt7","opt8","opt9"]);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="selectoption" multiple="multiple">
              <option value="opt1">All</option>
              <option value="opt2">all_content1</option>
              <option value="opt3">all_content1</option>
              <option value="opt4">all_content1</option>
              <option value="opt5">all_content1</option>
              <option value="opt6">all_content1</option>
              <option value="opt7">all_content1</option>
              <option value="opt8">all_content1</option>
              <option value="opt9">all_content1</option>
              <option value="opt10">separate_content1</option>
              <option value="opt10">separate_content2</option>
            </select>
&#13;
&#13;
&#13;