Add dependent select box using html & Jquery?

Question

I have the dropdown in the frontend form for RMA. I want to add the dependent dropdown for more specifically describe the reason.

Parent Dropdown:

<select type="select" name="reason_id" id="reason_id" title="Choose Reason" class="validate-select required-entry">
    <option value="">Please select reason</option>
    <option value="1">Defective</option>
    <option value="2">Wrong Item</option>
    <option value="3">Damaged in Transit</option>
    <option value="5">Return</option>
    <option value="4">Other</option>
</select>

Now I want to add the second dropdown on change parent dropdown option.

for example: I am choosing "Defective" option from the parent dropdown then the below option will be dispalyed:

<select type="select" name="reason_id" id="reason_id" title="Choose Reason" class="validate-select required-entry">
    <option value="">Please select reason</option>
    <option value="1">Did not Fit</option>
    <option value="2">Stopped working after a certain time</option>
    <option value="3">Other</option>
</select>

for example: When I choosing "Wrong Item" from the parent dropdown then the below option will be dispalyed:

<select type="select" name="reason_id" id="reason_id" title="Choose Reason" class="validate-select required-entry">
    <option value="">Please select reason</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

All items will be fixed.

How can add using jquery?

Possible duplicate of [how to change a selections options based on another select option selected?](https://stackoverflow.com/questions/4480637/how-to-change-a-selections-options-based-on-another-select-option-selected) — Shinra tensei, Sep 08 '17 at 07:43

score 1 · Answer 1 · answered Sep 08 '17 at 08:09

I achieved the expected behavior. In the code i rested the form with the content based on the value selected in the parent drop down.

If user selects the Defective option then the reason for the defective will be displayed.

 $("#reason_id").on("change", function(){
        var selected = $(this).val();
        if($(this).val()==1){
          $("#reason_form").html('');
          $("#reason_form").html(defectiveHTML);
        }
      });

if the selected value one i will change the content of the form with the child dropdown.

Please find the sample code. CodePen

score 1 · Answer 2 · answered Oct 04 '17 at 05:43

You are required to add parent div for each select box:

<script type="text/javascript">
   Event.observe(document, 'dom:loaded', function(event) {
        if ($('reason_id').value === '1') {
            $('defective_dependent').show();
        }
        if ($('reason_id').value === '2') {
            $('wrong_item_dependent').show();
        }
        if ($('reason_id').value === '5') {
            $('return_dependent').show();
        }
        ............
        ............
        ............
        Event.observe($('reason_id'), 'change', function(event){
            if ($('reason_id').value === '1') {
                    $('defective_dependent').show();
                }else {
                    $('defective_dependent').hide();
                }
                if ($('reason_id').value === '2') {
                    $('wrong_item_dependent').show();
                }else {
                    $('wrong_item_dependent').hide();
                }
                if ($('reason_id').value === '5') {
                    $('return_dependent').show();
                }else {
                    $('return_dependent').hide();
                }
                .....................
                .....................
                .....................
            });
        });
</script>

Add dependent select box using html & Jquery?

2 Answers2