HTML 选择器多个、选项"all"禁用所有其他选项

Question

我的网页中有一个这样的选择器元素：

<select id="difficulty"  name="difficulty" class="selectpicker"  multiple onchange="ChangeFilters()">
                                          <option value="-1" selected >All</option>
                                            <option value="0" >Facile</option> 
                                            <option value="1" >Normal</option>
                                            <option value="2"  >Difficile</option>
                                         </select>

我希望当用户选择"全部"选项（值 = '-1'）时，如果选择了其他选项，则它们将变为未选中，并且如果用户选择其他选项时选择了全部选项，则"所有选项"变为未选择。

我已经搜索了大约 2 个小时，但我无法使其工作。

我使用引导程序，这个选择元素是一个选择选择器元素，当我尝试某些东西时，我的 javascript 不起作用......

请帮忙！

编辑：

我发布了工作代码作为答案，感谢您的帮助！

Answer 1

像这样的东西？

        function ChangeFilters(){
            var selVal = $('#difficulty').val()[0];
            if(selVal == -1){
                $('#difficulty').attr('multiple',false);
            }else{
                $('#difficulty').attr('multiple',true);
            }
        }

Answer 2

在这篇文章的帮助下 全选/取消全选 在引导中选择插件

这是完整的工作代码，允许用户选择全部选项，3个困难，或者什么都没有：

.HTML：

<select id="difficulty"  name="difficulty" class="selectpicker"  multiple onchange="ChangeFilters()">
                                      <option value="All" selected >Tous</option>
                                        <option value="0" >Facile</option> 
                                        <option value="1" >Normal</option>
                                        <option value="2"  >Difficile</option>
                                     </select>  

Javascript ：

 //This need to be on your page load or other load event before the first onChange.
    $('#difficulty').data('allOptionIsSelected', true);
 function ChangeFilters() {
     if ($('#difficulty') != null) {
         if ($('#difficulty').val() != null) {

             var allOptionIsSelected = ($('#difficulty').val() || []).indexOf("All") > -1;
             function valuesOf(elements) {
                 return $.map(elements, function (element) {
                     return element.value;
                 });
             }
             if ($('#difficulty').data('allOptionIsSelected') != allOptionIsSelected) {
                 //User clicked 'All' option
                 if (allOptionIsSelected) {
                     $('#difficulty').selectpicker('val', ["All"]);
                     $('#difficulty').selectpicker('refresh');
                 } else {
                 }
             } else {
                 // User clicked other option
                 if ($('#difficulty').val().length != $('#difficulty').find('option').length) {
                     //user clicked other
                     // All options were selected, user deselected one option
                     // => unselect 'All' option
                     $('#difficulty').selectpicker('val', valuesOf($('#difficulty').find('option:selected[value!=All]')));
                     allOptionIsSelected = false;
                 }
             }
             $('#difficulty').data('allOptionIsSelected', allOptionIsSelected);
         }
         $('#difficulty').selectpicker('refresh');
     }

 }

如果要使它适用于您的项目，请将"#difficulty"更改为选择控件的 id。

感谢@yuriy636之前的帮助:)