How to use selected in option attribute in name attribute using Javascript or jQuery?

Question

I want to use “selected” in option attribute in name attribute using Javascript or jQuery. It means I want to use name="1" option as selected one when the page is loaded. I tried with the below code. But it not workes.

Code:

<select id="countryselect" name="country">
  <option value="1" name="0">Afghanistan</option>
  <option value="2" name="0">Albania</option>
  <option value="3" name="0">Algeria</option>
  <option value="4" name="1">Malaysia</option>
  <option value="5" name="0">Maldives</option>
</select>

Jquery:

$("#countryselect").$('option[name="1"]')

Demo: http://jsfiddle.net/muthkum/zYRkC/

Thank you.

Answer 1

You can pass a second parameter to the selector to define the scope

$('#countryselect').val($('option[name="1"]', "#countryselect").val());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="countryselect" name="country">
<option value="1">Afghanistan</option>
<option value="2" name="1">Albania</option>
<option value="3">Algeria</option>
<option value="4">Malaysia</option>
<option value="5">Maldives</option>
</select>

Answer 2

Just put this line of code in your script-tag and it will work like you want.

$('#countryselect option[name="1"]').attr('selected',true);

Answer 3

If you want to go with dynamic assignment, you can go with

$("#countryselect").val(1) .

If selection of option is static and only want for initial load, then selected can be used for this like

<option value="4" selected>Malaysia</option>