Javascript HTML选择器，多个选项"；“全部”；禁用所有其他选项

我的网页中有一个选择选择器元素，如下所示：

<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个小时，但我无法让它工作

我使用bootstrap，这个select元素是一个selectpicker元素，我的javascript在我尝试某些东西时不起作用

请帮忙

编辑：

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

像这样的

        function ChangeFilters(){
            var selVal = $('#difficulty').val()[0];

            if(selVal == -1){
                $('#difficulty').attr('multiple',false);
            }else{
                $('#difficulty').attr('multiple',true);
            }
        }

---

在这篇文章的帮助下

这是完整的工作代码，允许用户选择全部选项、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>  

如果希望在项目中实现此功能，请将“#难度”更改为select控件的id

---

感谢@yuriy636提供的先前帮助：）

您使用JavaScript尝试了什么？您确定要禁用其他选项吗？你不想在选择其他选项时取消选择“全部”吗？@CyrilIselin我尝试过类似的方法：类似这样的方法，但我的选择器根本没有刷新：for（var I=1；Ival（）返回

null

，则可能重复。在

[0]

之前需要有一个空检查，否则就会抛出错误。@4castle Good point，我用工作日志更新了我的帖子function@yuriy636使用此解决方案，第一次单击（更改时的第一次）不会更新值，我需要单击两次以选择其他选项，并且仅在页面加载后的第一次，有什么想法吗？你的意思是如果你选择了“全部”，即使它是在页面加载后选择的？尝试过其他事情，目前为止一切都很顺利。@yuriy636更新了我的帖子，描述了我的问题

 //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');
     }


 }