CODEWITHSUNDEEP
htmljquery
Saleh
Saleh

Reputation: 294

How to remove attr 'select' from dropdown list options that is repopulate with ajax request

I made a form that has a chained dropdown lists. Each subsequent dropdown list will be repopulated with ajax request based on the first dropdown list selection. In each dropdown list the first selected field is "---------" which has the attribution selected. When user selects another option the previous selected option still has the attribute of "selected". What I want to achieve is that the new selected option will be the one which has the selected attribute. I have tried the .removeProp('selected', false) and .removeAttr('selected') but the problem is persisting.

Here is the HTML Code:

<div id="div_id_CommonForm-country" class="form-group">
<label for="id_CommonForm-country" class=" requiredField">
             country :
    <span class="asteriskField">*</span>
</label>
<div class="">
    <select name="CommonForm-country" class="select form-control" required="" id="id_CommonForm-country">
        <option value="" selected="">---------</option>
        <option value="1">USA  </option>
        <option value="5">Canada</option>
    </select>
</div>

Here is the ajax request:

<script type="text/javascript">
    
    $("#id_CommonForm-country").change(function(){
    var url_province = $("#ads_main_post_form").attr("data-provinces-url"); // get the url of the `load_provinces` view

    var countryId = $(this).val(); // get the selected country ID from the HTML input

    $("#id_CommonForm-country  option:selected").each(function () {
           $(this).attr('selected', '');
           });
    var value = $(this).val();
    $(this).find('option[value="'+value+'"]').attr("selected", "selected");


    $.ajax({                       // initialize an AJAX request
    url: url_province,                    // set the url of the request (= localhost:8000/twons/ajax/load-rovinces/)
    data: {
      'user_country': countryId,  // add the country id to the GET parameters
      csrfmiddlewaretoken: '{{csrf_token}}',
    },
    success: function (data) {   // `data` is the return of the `load_provinces` view function
        var json = JSON.parse(data);
        var provinces_list = $("#id_CommonForm-province").html('');
        var city_list = $("#id_CommonForm-city").html('');
        
        city_list.append('<option selected disabled>'+'---------'+ '</option>');

        var  first_item = 
          '<option selected disabled>'+'---------'+ '</option>';

        var  list=""

          for(var j = 0; j < json.province_id.length; j++) {
          list+=
              '<option value="'+json.province_id[j]+'">'+json.province_name[j]+'</option>';  
              // replace the contents of the province input with the data that came from the server
            }
            complete_list = first_item.concat(list);
            provinces_list.append(complete_list);
        }
    });

    });

Any help or suggestion is highly appreciated: Note: I have tried many suggested solutions posted on stackover flow but nothing helpt.

Upvotes: 2

Views: 511

Answers (1)

Swati
Swati

Reputation: 28522

You can simply use removeAttr('selected'); to remove selected and then use attr("selected", "selected"); to add option selected to only to choosen option.

Demo code :

$("#id_CommonForm-country").change(function() {
  var url_province = $("#ads_main_post_form").attr("data-provinces-url");
  var countryId = $(this).val();
  $("#id_CommonForm-country  option").removeAttr('selected'); //remove attr selected
  $(this).find('option[value="' + countryId + '"]').attr("selected", "selected"); //add selected to option actual selected
  console.log(countryId)
  //your ajax call
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_id_CommonForm-country" class="form-group">
  <label for="id_CommonForm-country" class=" requiredField">
             country :
    <span class="asteriskField">*</span>
</label>
  <div class="">
    <select name="CommonForm-country" class="select form-control" required="" id="id_CommonForm-country">
      <option value="" selected>---------</option>
      <option value="1">USA </option>
      <option value="5">Canada</option>
    </select>
  </div>

Upvotes: 2

Related Questions