how to set a default value and populate in drop down select box when page loads in jquery

Question

on document ready, I have given like below code

$(document).ready(function(){
  $('#dropID').val(10);
});

But whenever page loads, the value is not binded in that select box. Can any one suggest?

Answer 1

Setting the value in a standard <select> will select it.

If your select code does not look like this, then that is the issue. Assuming you load jQuery and the IDs are correct

 $(function() { $("#dropID").val(10) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="dropID"> <option value="">Please select</option> <option value="10">Ten</option> <option value="20">Twenty</option> <option value="30">Thirty</option> </select>