I'd like to loop through all of the select inputs on a page and if the selected value is not a certain option then set that value to selected

I have some selects

<select name="select1">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

I'm looping through them like so, but I can't figure out how to set the selected property to option '2' if it isn't already selected

$('select').each(function() {

    var selected = $(this).find(":selected");

    if (selected.val() != 2) {
        // do some stuff

    }

}

EDIT:

I should elaborate. If a select input value is changed, I'm appending a string e.g. '-updated' to the input value as each input will be posting off to a database. Ideally I'd only do this for inputs that have changed for efficiency

So I'd like to set all selects inputs that don't already have option 2 selected to be selected and have a value of "2-updated"

Thanks for all of the answers so far

I'd like to loop through all of the select inputs on a page and if the selected value is not a certain option then set that value to selected

I have some selects

<select name="select1">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

I'm looping through them like so, but I can't figure out how to set the selected property to option '2' if it isn't already selected

$('select').each(function() {

    var selected = $(this).find(":selected");

    if (selected.val() != 2) {
        // do some stuff

    }

}

EDIT:

I should elaborate. If a select input value is changed, I'm appending a string e.g. '-updated' to the input value as each input will be posting off to a database. Ideally I'd only do this for inputs that have changed for efficiency

So I'd like to set all selects inputs that don't already have option 2 selected to be selected and have a value of "2-updated"

Thanks for all of the answers so far

• javascript
• jquery

• 2 It doesn't matter if it's already selected - just set it again and jQuery will deal with it for you. If you're setting them all to 2, you don't even need the loop, just $('select').val('2') – Rory McCrossan Commented Jul 25, 2016 at 10:39
• 1 $('select').val('2'); – Pranav C Balan Commented Jul 25, 2016 at 10:40
• or you may want something $('select:not(:has(:selected))').val('2'); – Pranav C Balan Commented Jul 25, 2016 at 10:41
• I should elaborate. If a select input value is changed, I'm appending a string e.g. '-updated' to the input value as each input will be posting off to a database. Ideally I'd only do this for inputs that have changed for efficiency So I'd like to set all selects inputs that don't already have option 2 selected to be selected and have a value of "2-updated" Thanks for all of the answers so far – jdoe Commented Jul 25, 2016 at 11:33

3 Answers 3

Find all options with value equal to 2 and select them:

$('select').each(function() {
  $(this).find('option[value="2"]').prop('selected', true);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected>Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

You can pass the desired option value to .val() method while targeting select to select required option element:

$('select').val('2');

Working Snippet:

 $('select').val('2');

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected>Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

You can explore the value key of this jquery object

   $('select').each(function() {
    var selected = $(this)[0].value;
    console.log(selected)
    if (selected != 2) {
        alert("Not 2")

   }
})

JSFIDDLE