How do i set the value of a select box programmatically in JavaScript / jQuery

by

in this article I am going to explain how can we set value of select box using JavaScript or jQuery. Let’s suppose you are fetching some value from database and you want to display it on website page in dropdown list. The values that are in database should be added automatically in select box. You need to follow the following step to perform this task.

Step 1

$.ajax({
        url: "/room/findRoom",
        method: "GET",
        data: {
          id: id
        },
        success: function(response) {
          
          if (response.status == "success") {
            
            $('#room_type').val(response.room_type);
            $('#type_details').val(response.type_details);

            $('#type_status').val(response.room_status);
            

          }
        }
      });

$('#type_status').val(response.room_status); this code is going to set the value of select box.Suppose response.room_status has value “1”, the option will get selected that has the value 1.so you need to assign the value of option which you want to get selected.

Step 2

You need to assign the the value of option tag which you want to get selected from database so in this you can see the value assigned.

<div class="col-lg-12 col-md-4 col-sm-6 col-12">
                            <select class="form-control" name="type_status" id="type_status">
                                <option value="1">Show</option>
                                <option value="0">Hide</option>
                            </select>
                        </div>

Leave a Comment