Set HTML Select Options Selected value Using jQuery |

Congrats, You are Subscribed to Receive Updates.

Set HTML Select Options Selected value Using jQuery

Generally we can specify the HTML Select options selected value by writing HTML Code. With help of code we can set the Select Options selected value by using jQuery . Here I am writing a sample select options and  change its  selected value by writing jQuery code.

<select id="kv_color" name="color">
      <option value="green">Green</option>
      <option value="blue" selected>Blue</option>
      <option value="orange">Orange</option>
      <option value="yellow"> Yellow </option>

The above HTML Form give you the result of  the following image, Here “Blue” Selected in default.


Select Option

But we are going to set ” Yellow ” as Selected value by using jQuery.

$(document).ready(function() {
     $("#kv_color").prop("selectedIndex", 3); 

The above code will change the Selected option on document load. So you can see the result as “Yellow” Selected in default.  Here

kv_color is the id of Select option and SelectedIndex is the property, which is set 3 as default value, Here # is the index of the options, Total count is 4 but index starts with “0”(Zero) . So the property index is 3 for yellow.

 If you are interested to read about the  Select Options full working with jQuery and JavaScript Example.  Read here for more


About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, PHP and Data Analyst. Database Management Advance Level

One comment

  1. commenter
    Hire Php Developer

    Thanks sir,

    This article very helpfull.I can resolve my problem to refer this article.

    Thanks again.

Comment Below

Your email address will not be published. Required fields are marked *


Current ye@r *