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

您需要将更改事件绑定到select元素。这将在每次更改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(' - ');
            }
        });
        $('#select_preferences').change(function(){
            $('.range-slider').show();
        });
    });
</script>

Answer 2

这是回答这个问题的功能：

$（document）.ready（function（）{

    $('#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[].
        }
    });

在select上显示html元素

2 个答案: