Hiding / Displaying Div Based on Dropdown Selection in CodeIgniter Using Jquery

Rohan Jaiswal 0
Viewed 52

I'm trying to display specific divisions based on a dropdown selection here, In my example,, I have two different dropdown options followed by two different divs. I want to show only one of these two divs based on the selected value and keep the other divs hidden.

For example, If Option 1: House Inspection is selected, then the content in div class="house" should be displayed.

PHP

<!-- PHP CodeIgniter Render Select Instead of HTML Select-->
 <div class="col-md-12" >
                            <?php
$subject = [0 => ["id" => "House", "name" => _l("House Inspection") ], 1 => ["id" => "Plot", "name" => _l("Plot Inspection") ], "name" => _l("Farm House Inspection") ]];

$value = isset($subject) ? $disscussion->subject : "";
echo render_select("subject", $subject, ["id", "name"], "Inspection Type:", $value);
?>
                        </div>

                        <div class="house">
                           <?php echo render_textarea('house', 'project_discussion_description'); ?>
                        </div>

                        <div class="plot">
                           <?php echo render_textarea('plot', 'project_discussion_description'); ?>
                        </div>


    <script>
            jQuery(document).ready(function($){
            $('select[name=subject]').change(function () {

            // hide all optional elements
            $('.house').css('display','none');
            $('.plot').css('display','none');


            $("select[name=subject] option:selected")
            .each(function () {
                if($(this).val() == "House" || "Plot") {
                    $('.subject').css('display','block');
                } else if($(this).val() == "House") {
                    $('.house').css('display','block');
                } else if($(this).val() == "Plot") {
                    $('.plot').css('display','block');
                }

               });
              }); 
             });
    </script>
codeigniter jquery php javascript
1 Answers
                        <div class="col-md-12">
                          <div class="form-group" app-field-wrapper="purpose">
                            <label for="template" class="control-label">Select Inspection Template</label>
                            <div class="dropdown bootstrap-select bs3" style="width: 100%;">
                              <select id="purpose" name="template" class="selectpicker" data-width="100%" data-live-search="true">
                                <option value="0">Nothing Selected</option>
                                <option value="1">House</option>
                                <option value="2">Plot</option>
                                <option value="3">Farm</option>
                              </select>
                            </div>
                          </div>
                        </div>
                        <div style='display:none;' id='house'> Ya </div>
                        <div style='display:none;' id='plot'> Ho </div>
                        <div style='display:none;' id='farm'> Ha </div>

JS

$('#template').on('change', function () {
    $("#house").css('display', (this.value == '1') ? 'block' : 'none');
    $("#plot").css('display', (this.value == '2') ? 'block' : 'none');
    $("#farm").css('display', (this.value == '3') ? 'block' : 'none');
});
Rohan Jaiswal0
Related