0

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.

Student18
  • 125
  • 1
  • 1
  • 11
  • https://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery Does this answer your question? – bassxzero Oct 28 '20 at 02:51
  • No, they are using a local array while I have to fill the dropdown from a remote server. – Student18 Oct 28 '20 at 02:54
  • It doesn't matter where you get the data from. Its the same process to fill the select input. One just happens after the ajax finishes. – bassxzero Oct 28 '20 at 02:57
  • Ok, can you please explain a little how can i use ajax to fill it. I have retrieved the data from the server but I don't know how to fill that data to this dropdown. Suppose an array is given as: {"1":"Value","2":"Value2"} etc. – Student18 Oct 28 '20 at 02:59
  • Ajax have a success callback, you can try put the code in the above question into that success callback – vicnoob Oct 28 '20 at 03:02

1 Answers1

3

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

CodingWithRoyal
  • 1,006
  • 1
  • 6
  • 15