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

69
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>

READ ALSO
Is it possible to log the bytes which a server sends? [closed]

Is it possible to log the bytes which a server sends? [closed]

Want to improve this question? Update the question so it focuses on one problem only by editing this post

103
What is the difference between // and .// in XPath?

What is the difference between // and .// in XPath?

When I execute these XPath expression on Chrome Developer Tools' console over googlecom, I got the same results

66
NodeJS checking if XML element exists and add or delete

NodeJS checking if XML element exists and add or delete

I'm working with XML in NodeJSI've been using the xmlbuilder to create my XML

54