CODEWITHSUNDEEP
javascriptjquery
Derek M.
Derek M.

Reputation: 89

jQuery onchange function on one select, ajax populating secondary select. How to change back to default value?

I have two select elements. One for manufacturer and one for model. The manufacturer select element will update the model select element on change via ajax. The function I have works well, but I'd like to add in functionality to change the model select element back to it's default value (Select model...) and disable the model select if the primary manufacturer select element is set back to its default original value (Select manufacturer...).

Manufacturer select (primary)

<select name="inputManufacturer" id="inputManufacturer" class="form-control">
    <option selected>Select manufacturer...</option>
    <option value="1">Apple</option>
</select>

Model select (secondary, updates via ajax)

<select name="inputModel" id="inputModel" class="form-control" disabled>
    <option>Select model...</option>
</select>

jQuery function

$(document).ready(function ()
{
        $('select[name="inputManufacturer"]').on('change',function(){
           $('select[name="inputModel"]').prop('disabled', false);
           var man_ID = $(this).val();
           if(man_ID)
           {
              $.ajax({
                 url : 'add/' +man_ID,
                 type : "GET",
                 dataType : "json",
                 success:function(data)
                 {
                    console.log(data);
                    $('select[name="inputModel"]').empty();
                    $.each(data, function(key,value){
                       $('select[name="inputModel"]').append('<option value="'+ key +'">'+ value +'</option>');
                    });
                 }
              });
           }
           else
           {
              $('select[name="inputModel"]').empty();
           }
        });
});

Upvotes: 0

Views: 129

Answers (1)

Evik Ghazarian
Evik Ghazarian

Reputation: 1791

Give the default options value="0"

Then you can use $('select[name="inputModel"]').html('<option value="0">Select model...</option>'); instead of empty. And disable it after that.

$(document).ready(function ()
{
    $('select[name="inputManufacturer"]').on('change',function(){
       $('select[name="inputModel"]').prop('disabled', false);
       var man_ID = $(this).val();
       if(man_ID > 0)
       {
        $('select[name="inputModel"]').append('<option value="1">Option1</option>');
        $('select[name="inputModel"]').append('<option value="2">Option2</option>');
       }
       else
       {
          $('select[name="inputModel"]').html('<option value="0">Select model...</option>');
          $('select[name="inputModel"]').prop('disabled', true);
       }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="inputManufacturer" id="inputManufacturer" class="form-control">
    <option value="0" selected>Select manufacturer...</option>
    <option value="1">Apple</option>
</select>
<select name="inputModel" id="inputModel" class="form-control" disabled>
    <option value="0">Select model...</option>
</select>

Upvotes: 1

Related Questions