CODEWITHSUNDEEP
javascriptphphtmljquerycss
Student18
Student18

Reputation: 154

Dynamically changing the content of dropdown using jquery

I am very new to jQuery. I want to set the content of a dropdown from a given URL. Suppose a dropdown is given as:

<!--filter1-->
  <h4>City Filter1</h4>
    <select id="filter1">
    <option>--Select--</option>
  </select>

  <!--filter2-->
  <h4>City Filter2</h4>
  <input type="Checkbox" class="filter2">Value1<br/>
  <input type="Checkbox" class="filter2">Value2<br/>
  <input type="Checkbox" class="filter2">Value3<br/>
  <input type="Checkbox" class="filter2">Value4<br/>

  <!--filter3-->
  <h4>City Filter3</h4>
  <input type="Checkbox" class="filter3">Value1<br/>
  <input type="Checkbox" class="filter3">Value2<br/>
  <input type="Checkbox" class="filter3">Value3<br/>
  <input type="Checkbox" class="filter3">Value4<br/>

<input type="Checkbox" class="filter2"><br/>

After this I also want to change the content of filter2 and filter3 checkboxes. I don't know how can I done it as I am very new to jquery.

Upvotes: 0

Views: 71

Answers (1)

CodingWithRoyal
CodingWithRoyal

Reputation: 1123

You can use ajax with some jquery to achieve this

$.ajax({url: "http://Your_Sexy_Url.com", success: function(result){

    //Here you can process your response from url
    $("select").html(""); // remove old options from select
    var options = "";
    $.each(data, function(index) {
        var row = data[index];
        options += "<option>"+row+"</option>"
    });
    $("select").html(options); // add new options to select

}});

And in same way you can update input[type=checkbox] too

Upvotes: 3

Related Questions