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.