CODEWITHSUNDEEP
phpjavascriptjquery
MSD
MSD

Reputation: 349

Make div appear on dynamic option select

I have a SELECT input that gets all of its options via the database. Below the select input, there are divs created for each option in the select. I want the user to select an option from the drop down and make the div below display. So basically the drop down are sports, and if they make a selection the sport div hidden below will load, and that div will contain all the sport positions

 <select name="sport" id="select">
    <?
    foreach ($getSports as $row) {
        echo '<option onClick="toggle'.$row['1'].'()" onLoad="toggle'.$row['1'].'()" value="' . $row['0'] . '">' . $row['1'] . '</option>';
    }
    ?>

                </select>
            </label>
           <?
    foreach ($getSports as $row) {
        echo '<div id="position' . $row['1'].'" style="margin-top: 5px;display:none;">Positions:' . $row['1'].'';
        $sport = $row['0'];
            $getPositions = $model->getPositions($sport);
            foreach ($getPositions as $row2) {
                echo '<label style="float:right">'.$row2['1'].'</label>';
               echo '<input type="checkbox" name="'.$row2['1'].'" value="'.$row2['0'].'">';
            }

        echo '</div>';
    }
    ?>

Upvotes: 1

Views: 907

Answers (2)

Eli
Eli

Reputation: 17825

How about modifying your code like this? Seems to be more semantic:

    <select name="sport" id="select">
    <? foreach ($getSports as $row) {
        echo '<option data-row-id="'.$row['1'].'" value="'.$row['0'].'">'.$row['1'].'</option>';
    } ?>
    </select>
</label>

<? foreach ($getSports as $row) {
    echo '<div data-position="'.$row['1'].'" style="margin-top:5px;display:none;">Positions:' . $row['1'].'';
        $sport = $row['0'];
        $getPositions = $model->getPositions($sport);
        foreach ($getPositions as $row2) {
            echo '<label style="float:right">'.$row2['1'].'</label>';
            echo '<input type="checkbox" name="'.$row2['1'].'" value="'.$row2['0'].'">';
        }

    echo '</div>';
}?>


<script>
$(function() {//create the binding once the document is ready
    $('#select').change(function() {
        var select = $(this);
        var selectedOption = select.find(':selected');
        var position = selectedOption.attr('data-row-id');
        var divContext = $('[data-position="'+position+'"]');

        $('[data-position]').not(divContext).hide();
        divContext.show();
    });
});
</script>

Upvotes: 1

RRStoyanov
RRStoyanov

Reputation: 1172

If you want to keep visible only the selected sport, I suggest this.

(1) add a class to the div which holds sports information - ex. class="sportsHolder"

(2) change this part 

onClick="toggle'.$row['1'].'()" onLoad="toggle'.$row['1'].'()"

to

onClick="toggle('.$row['1'].');" onLoad="toggle('.$row['1'].');"

(3) create the function

<script type="text/javascript">
    function toggle(whichPos) {
        $(".sportsHolder").hide();
        $("#position" + whichPos).show();
    }
</script>

at least I would do it that way.

Upvotes: 0

Related Questions