javascript - How to auto-select the value of a dropdown using jQuery? - Stack Overflow

admin管理员组

文章数量:1415420

How can I convert this JavaScript into jQuery?

The purpose of this is to auto-select the value of a dropdown that matches.

JS code :

window.onload = function(){
    document.getElementsByName("title")[0].value="the_title_value";
}

How can I convert this JavaScript into jQuery?

The purpose of this is to auto-select the value of a dropdown that matches.

JS code :

window.onload = function(){
    document.getElementsByName("title")[0].value="the_title_value";
}

• javascript
• jquery

Share Improve this question Follow edited Jun 8, 2016 at 15:10 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Jun 8, 2016 at 13:35 villouivilloui 24511 gold badge33 silver badges1212 bronze badges 3

• 1 Where are you stuck? Do you not know how to select the element? To set its value? Something else? – user1106925 Commented Jun 8, 2016 at 13:36
• 2 jQuery is JavaScript. Why bother converting and what's the actual issue? – j08691 Commented Jun 8, 2016 at 13:36
• All of the answers are doing what you want. – Mojtaba Commented Jun 8, 2016 at 15:23

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

You can select the elements by their name attribute, then get the :first of them before setting the current val(), like this:

$(window).on('load', function() {   
    $('select[name="title"]:first').val('the_title_value') 
});

$(document).ready(function(){
  $('select[name="title"]').first().val("the_title_value");
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select name="title">
<option value='the_title_value1'>1</option>
<option value='the_title_value'>2</option>
<option value='the_title_valu3'>3</option>
</select>

    $(document).ready(function(){
      $('[name="title"]').val("the_title_value");
    })

you only need first() if you have many elements with name="title" on the page. The reason why you have to put [0] in vanila javascript is because

    document.getElementsByName("title")

returns an array of elements, even if there is only one with this name.

window.onload = function() {
  // document.getElementsByName("title")[0].value="the_title_value";
  // get all items with name "title" and then reduce the result set to the first element and then set the value
  $('[name="title"]').first().val("the_title_value");
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="title">
  <option value='the_title_value_1'>the_title_value_1</option>
  <option value='the_title_value'>the_title_value</option>
  <option value='the_title_value_3'>the_title_value_3</option>
</select>

You could use :eq and name selector inside ready function to achieve that , check the example bellow.

Hope this helps.

---

$(function(){
  $("select[name='title']:eq(0)").val('second');
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="title">
  <option value='first'>First 1</option>
  <option value='second'>Second 2</option>
  <option value='third'>Third 3</option>
</select>

For programmatically selecting a select element (drop-down list), if you have an Id on your select element, then jQuery makes it as simple as assigning a value to the element.

let dynamicValue = 'xyz';  //just ensure this value is on the target list
$("#idOfSelect").val(dynamicValue);

Please note that the onChange event will not be triggered by this. Also, the DOM state should be Ready as already pointed out by others.

本文标签： javascriptHow to autoselect the value of a dropdown using jQueryStack Overflow