Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Neeraj1005's avatar

How to reset select dropdown using jquery?

https://jsfiddle.net/Neeraj1005/cmhfd8sz/10/ When I select then parent menu for any menu display then it select but when I change the menu display it won't change the parent menu by default select parent menu. How can I reset this?

This is first Select dropdown When I select the Sub Menu The second div will show
            <div class="form-group">
                    <label for="exampleInputEmail1">Menu Display</label>
                    <select name="status" class="form-control">
                      <option value="1">Top Menu</option>
                      <option data-check="true" value="2">Sub Menu</option>
                        <option value="0">Footer Menu</option>

                    </select>
          
                  </div>
                  
   This is second div                 
  <div class="form-group" id="opt" style="">
    <label for="parent_id">Parent Menu</label>
    <select class="form-control" name="parent_id" id="parent_id">
      <option>select Menu</option>      
      <option value="1">one</option>
      <option value="2">Two</option>

    </select>
    </div>

This is Jquery code

<script>
    $(function() {
    $('select').change(function(evt) {
       console.log($('select option:selected').data('check'));
       $('select option:selected').data('check') ? 
           $('#ifYes').show() : $('#ifYes').hide();
    });
});
</script>

Now my question is that If i select the Sub Menu it will show the div but when I Select other like Top Menu then I want, it will reset the second drop down value not stored the Sub menu value.. How can I reset the value for each select.

0 likes
1 reply
Neeraj1005's avatar
Neeraj1005
OP
Best Answer
Level 9

problem solved https://jsfiddle.net/Neeraj1005/059u2m4e/49/

            <div class="form-group">
                    <label for="exampleInputEmail1">Menu Display</label>
                    <select name="status" id="status" class="form-control first">
                      <option value="1">Top Menu</option>
                      <option data-check="true" value="2">Sub Menu</option>
                        <option value="0">Footer Menu</option>

                    </select>
          
                  </div>
                  
                    
  <div class="form-group " id="ifYes" style="">
    <label for="parent_id">Parent Menu</label>
    <select class="form-control  rest" name="parent_id" id="parent_id">
      <option value="0">select Menu</option>      
      <option value="15">one</option>
      <option value="22">Two</option>

    </select>
    </div>

jquery

    $(function() {
    $('select').change(function(evt) {
      // console.log($('select option:selected').data('check'));
    $('select option:selected').data('check') ? $('#ifYes').show() : $('#ifYes').hide();
      
    });
    $("#status").change(function(){
  $('#parent_id').val('0');
});
});
1 like

Please or to participate in this conversation.