Использование onChange в бутстраге multiselect

Я пытаюсь использовать multiselect bootstrap, чтобы установить видимость некоторых столбцов в таблице через функцию jQuery toggle(). Для каждого столбца, выбранного в раскрывающемся списке, я хочу либо показать, либо скрыть его в зависимости от выбранного вами или нет. Но я явно не понимаю, как использовать событие onChange, чтобы сделать эту работу. Кто-нибудь, пожалуйста, покажет мне правильный синтаксис.Использование onChange в бутстраге multiselect

Мои Javascript и HTML выглядит следующим образом:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#showops').multiselect({ 
      maxHeight: 300, 
      buttonWidth: '150px', 
      includeSelectAllOption: true, 
      allSelectedText: 'Showing All', 
      onChange: function(element, checked) { 
       if(checked == true){ 
        if (element == '1') { $(".toggleG").toggle(); } 
        else if (element == '2') { $(".toggleE").toggle(); } 
       } 
      } 
     }); 
    }); 
</script> 

<select id="showops" multiple="multiple"> 
    <option value="1"> Show Grid </option> 
    <option value="2"> Show eMail </option> 
    <option value="3"> Show Lat/Lon </option> 
    <option value="4"> Show Last Name </option> 
    <option value="5"> Show TOD </option> 
</select>

источник

2015-10-22 Keith D Kaiser

Является ли "OnChange" событие, инициирующее или нет? –

Просьба более подробно описать, что вы видите, когда пытаетесь это сделать. Возможно, чтобы продемонстрировать jsfiddle. –

Насколько я могу судить, событие OnChange не запускается вообще. Я помещаю в него предупреждение, и ничего не происходит. –

Это исправлено.

onChange: function(option, checked, select) { 
      var opselected = $(option).val(); 
      if(checked == true) { 

        if (opselected == '1') { $(".toggleG").toggle(); } 
        if (opselected == '2') { $(".toggleE").toggle(); } 
        if (opselected == '3') { $(".toggleLAT").toggle(); $(".toggleLON").toggle();} 
        if (opselected == '4') { $(".toggleLN").toggle(); } 
        if (opselected == '5') { $(".toggleTOD").toggle(); } 
      } else if(checked == false) 
        if (opselected == '1') { $(".toggleG").toggle(); } 
        if (opselected == '2') { $(".toggleE").toggle(); } 
        if (opselected == '3') { $(".toggleLAT").toggle(); $(".toggleLON").toggle();} 
        if (opselected == '4') { $(".toggleLN").toggle(); } 
        if (opselected == '5') { $(".toggleTOD").toggle(); }   
      } 
     }

источник

2015-10-23 18:41:36

Это исправить. Спасибо. –

Я изменил onChange следующим образом. Теперь он срабатывает, но он работает только для первого выбора, а не для каждого выбора.

onChange: function(option, checked, select) { 
    var opselected = $(option).val(); 
    if(checked == true) { 
     if (opselected == '1') { $(".toggleG").toggle(); } 
     if (opselected == '2') { $(".toggleE").toggle(); } 
     if (opselected == '3') { 
      $(".toggleLAT").toggle(); 
      $(".toggleLON").toggle(); 
     } 
     if (opselected == '4') { $(".toggleLN").toggle(); } 
     if (opselected == '5') { $(".toggleTOD").toggle(); } 
    } else if(checked == false) 
     if (opselected == '1') { $(".toggleG").toggle(); } 
     if (opselected == '2') { $(".toggleE").toggle(); } 
     if (opselected == '3') { 
      $(".toggleLAT").toggle(); 
      $(".toggleLON").toggle(); 
     } 
     if (opselected == '4') { $(".toggleLN").toggle(); } 
     if (opselected == '5') { $(".toggleTOD").toggle(); } 
    } 
}

источник

2015-10-22 20:36:21

-1

<script type="text/javascript"> 
    $(function() { 
     $("#showops").change(function() { 
     var selectedText = $(this).find("option:selected").text(); 
     var selectedValue = $(this).val(); 
     alert("Selected Text: " + selectedText + " Value: " + selectedValue); 
    }); 
}); 
</script>

источник

2016-10-10 18:06:33 devendra

OP задает вопрос о загрузке мультиселектора – Strnm

Использование onChange в бутстраге multiselect

ответ

Смежные вопросы