How can I get data for select box and set the data while using searching?

January 20, 2021, at 06:40 AM

         <div>
            <label for="sort">sort</label>
            <select name="sort" id="sort" class="form-control">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div>
            <label for="label">label</label>
            <select name="label" id="label" class="form-control">
                <option value=""></option>
                <option value="label1">label1</option>
                <option value="label2">label2</option>
            </select>
        </div>

There is a search function, so when I choose the sort and label select box then click the search button, it will sort data. But the selected value is not set in the select box.

How can I solve this? Please help me to solve this.

Answer 1

Add any event to get the selected dropdown value. Below, I have added a select change event.

$("#label").on("change", function(){
  //get the data using the above ID's
  var cars = ["Saab", "Volvo", "BMW"]; //example array
  
  //appending to the new Select #newData
  var htmlContent = "";
  htmlContent = "<option value=''></option>";
  $.each( cars, function( i, val ) {
    $( "#" + val ).text( "Mine is " + val + "." );
    htmlContent += "<option value= "+val+">"+val+"</option>";
  });
  $("#newData").append(htmlContent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
            <label for="sort">sort</label>
            <select name="sort" id="sort" class="form-control">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div>
            <label for="label">label</label>
            <select name="label" id="label" class="form-control">
                <option value=""></option>
                <option value="label1">label1</option>
                <option value="label2">label2</option>
            </select>
        </div>
        
        <div>
            <label for="newData">New Data</label>
            <select name="newData" id="newData" class="form-control">
            </select>
        </div>