在選擇時顯示html元素

Question

我希望用戶檢查至少一個複選框。然後，只有這樣 - 我想向用戶顯示一個html內容 - 一個範圍選擇器。

現在，當我檢查複選框列表中的至少一個選項時，它不會切換到範圍選擇器。

我目前有這樣的代碼：

<select id="select_preferences" multiple="multiple"> 
    <option value="Anaerobic"> Do Anaerobic Routines</option> 
    <option value="Aerobic">Do Aerobic Routines</option> 
    <option value="Diet">Diet Healthy</option> 
</select> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.range-slider').hide(); //hides the class "range-slider". (using a dot before the name to specify it's a selector for the class.) 
     $('#select_preferences').multiselect({ 
      buttonText: function(options, select) { 
       return 'Look for users that:'; 
      }, 
      buttonTitle: function(options, select) { 
       var labels = []; 
       options.each(function() { 
        labels.push($(this).text()); 
        $('.range-slider').show(); 
       }); 
       return labels.join(' - '); 
      } 
     }); 
    }); 
</script> 
<!-- html code & script for age-range selector --> 

<input class="range-slider hidden" value="23" /> 

<script> 
    $(document).ready(function() { 

$('.range-slider').jRange({ 
    from: 16, 
    to: 100, 
    step: 1, 
    scale: [16,30,50,75,100], 
    format: '%s', 
    width: 300, 
    showLabels: true, 
    isRange : true 
})}); 
</script> 

Answer 1

您需要更改事件選擇元素綁定到你。這將在每次更改選擇元素時執行一個操作。試試這個代碼：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.range-slider').hide(); //hides the class "range-slider". (using a dot before the name to specify it's a selector for the class.) 
     $('#select_preferences').multiselect({ 
      buttonText: function(options, select) { 
       return 'Look for users that:'; 
      }, 
      buttonTitle: function(options, select) { 
       var labels = []; 
       options.each(function() { 
        labels.push($(this).text()); 
        $('.range-slider').show(); 
       }); 
       return labels.join(' - '); 
      } 
     }); 
     $('#select_preferences').change(function(){ 
      $('.range-slider').show(); 
     }); 
    }); 
</script> 

Answer 2

下面是回答這個問題的功能：

$（文件）。就緒（函數（）{

$('#select_preferences').multiselect({ 
     buttonText: function(options, select) { 
      return 'Look for users that:'; 
     }, 
     buttonTitle: function(options, select) { 
      var labels = []; 
      options.each(function() { 
       labels.push($(this).text()); //get the options in a string. later it would be joined with - seprate between each. 
      }); 
     if(!labels.length ===0) 
     { 
     $('#range-div').removeClass('hide'); 
     // The class 'hide' hide the content. 
     //So I remove it so it would be visible. 
     } 
     if (labels.length ===0) 
     $('#range-div').addClass('hide'); 
    //If the labels array is empty - then do use the hide class to hide the range-selector. 
      return labels.join(' - '); 
    // the options seperated by ' - ' 
    // This returns the text of th options in labels[]. 
     } 
    });