CODEWITHSUNDEEP
javascriptjqueryselect
Sahil Verma
Sahil Verma

Reputation: 53

Why selected value of select gets change in dynamic dropdown?

I have some code in which two select boxes are present. One select is dynamically changing its value with respect to the first one. The first select box is this in which some values are coming from backend using PHP.

<select class="form-control" name="tsm_id" id="tsm_id">
    <option value=""><b>SELECT TSM</b></option>
    <?php echo fill_year($connect); ?> 
</select>

A second select box is this which is dependent on the first one. When any value in the first box is selected this select box change its value dynamically.

<select class="form-control" name="sr_id" id="sr_id">
<option value="" selected>SELECT SR</option></select>

But the problem is this that when I select any value in first select box then the selected value SELECT SR disappears and only values from backend comes there. I want that if anyone select value from first select box then SELECT SR remains there as selected value the rest values comes below that. I am using javascript code to append those options.

$(document).ready(function(){  
    $('#tsm_id').change(function(){  
         var tsm_id = $(this).val();  
         $.ajax({  
              url:"http://localhost/salesforce/fetch_sr.php",  
             method:"GET",
             data:{tsm_id:tsm_id},  
              dataType:"json",                  
              success:function(data){  
              // var data=JSON.stringify(data);

              $('#sr_id').html('');
              for (var i in data)
              {               
                $("#sr_id").append("<option value="+data[i].employee_id+">"+data[i].employee_name+"</option>");
              }
          }
          });
     });
});

Can anyone tell me what am I doing wrong in this. What i want is if someone selects value from the first select box then second select box remains same as in image with selected value set to SELECT SR and the options should be appended below it.

I want something like this:

I don't want like this if I am selecting a value from the first select box then the second select box displaying options, not the default value.

Presently I am getting like this:

Upvotes: 0

Views: 486

Answers (2)

M. Eriksson
M. Eriksson

Reputation: 13645

You're currently removing all options in your ajax callback before you loop out the new ones.
If you change 

$('#sr_id').html('');

to 

$('#sr_id').html('<option value="" selected>SELECT SR</option>');

that option will always be the first (and selected) value.

Upvotes: 0

Rajeev Ranjan
Rajeev Ranjan

Reputation: 497

 $('#sr_id').html('');

This is removing the default option on ajax success. You might want to use:

 $('#sr_id').html('<option value="" selected>SELECT SR</option>');

Upvotes: 1

Related Questions