在选择时显示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[]. 
     } 
    });