[osherdo]

Hi. I have this code:

<select id="select_preferences" multiple="multiple">
    <option value="Anerobic"> Do Anerobic Routines</option>
    <option value="Aerobic">Do Aerobic Routines</option>
    <option value="Diet">Diet Healthy</option>
</select>
<script type="text/javascript">
    $(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());
                });
                return labels.join(' - ');
            }
        });
    });
</script>

I now want to show the user some html code/elements when he selects at least one option from the drop down. How should I do that?

[no2pencil]

I would set the attribute by default to hidden & after the conditions are met, update to remove that value :

css update :

$('item').css('display','none');
$('item').css('display','block');

or jQuery functionality :

$('item').hide();
$('item').show();

[osherdo]

no2pencil okay thanks.

But where do I write the .hide function?

And if I understand right - I should place the .show function right before this return:

                return labels.join(' - ');

[no2pencil]

I would hide on load in ready().

[osherdo]

http://paste.ofcode.org/cZEBhrYfCbFzR356PczddL

It still won't work for me after I did it all.

sorry this is the code:

<select id="select_preferences" multiple="multiple">
    <option value="Anerobic"> Do Anerobic 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();
        $('#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());
                });
                $('item').show();
                return labels.join(' - ');
            }
        });
    });
</script>
<!-- html code & script for age-range selector -->

<input type="hidden" class="slider-input" 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>

[no2pencil]

 $('range-slider').hide();

The above piece of code hides the class "range-slider". Please show me where any html element has a class of range-slider in your code.

[andrewsw]

Only the version with a dot, '.range-slider', refers to a class-name. It is incorrect without a dot as 'range-slider' is not an HTML element.

Are you checking your browser's console for errors?

[osherdo]

no2pencil okay I have this only now:

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

Right now I don't have any console errors.

[andrewsw]

'item' is not an HTML element either, are you using some HTML/JS framework that works with such elements?

[osherdo]

andrewsw, on 14 March 2016 - 04:16 PM, said:

'item' is not an HTML element either, are you using some HTML/JS framework that works with such elements?

Yes I am so sorry! I am using bootstrap.

[andrewsw]

Ok, so range-slider is a class-name, and needs to be identified with $('.range-slider') not $('range-slider') (with a missing . ). The dot qualifies a class-name as selector.

[osherdo]

Okay, what's left to do? I need to define the case with an if statement?

how do I make sure it appears after at least one checkbox has been checked?

Maybe something like this?

if (options>1)
{
// Do something.
}

[andrewsw]

I know nothing about Bootstrap or that multiselect method, but I'd guess that you'd add the code to show something in here:

                options.each(function () {
                    labels.push($(this).text());
                });

I'm just assuming that pushing to the array indicates that 'something' has been selected.

You could try it while waiting for another response.

Shouldn't it be Anaerobic ?

[osherdo]

Yes I did it like you've suggested. Makes sense indeed. And thank for the hint you're right.

that's my code now:

<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>

[osherdo]

Here's the script that does the magic:

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