Show html content when multiple selecting

Discussion in 'jQuery' started by osherdo, Mar 14, 2016.

  1. #1
    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>
    Code (JavaScript):
    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?
     
    osherdo, Mar 14, 2016 IP
  2. osherdo

    osherdo Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    here's an updated 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>
    Code (JavaScript):
     
    osherdo, Mar 14, 2016 IP