Ben H Ben H - 5 months ago 7
jQuery Question

Target all Select fields not just first using JS/jQuery

I have some code that changes the text of an option within a select field. I have multiple select fields on a page with variable IDs so I cannot target each one individually. At the moment i seem to only be targeting the first select field on the page however I need this to loop for each select field that is on the page. What have I missed?



$( document ).ready(function() {
// Change first option text on dropdowns
$("select").val($("select option:first").text('Please select an answer...').val());

// Set first option as selected
$("select option:first-child").attr("selected", true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select name="wpProQuiz_field_83" id="forms_10_13" data-required="1" data-type="7" data-form_id="83">

<option selected="selected" value=""></option>
<option value="Very effective: The learning will have a major impact on my practice">Very effective: The learning will have a major impact on my practice</option>
<option value="Effective: The learning will have a minor impact on my practice">Effective: The learning will have a minor impact on my practice</option>
<option value="Partly effective: The learning confirmed that there was no need to modify my practice/I may modify my practice with further learning">Partly effective: The learning confirmed that there was no need to modify my practice/I may modify my practice with further learning</option>
<option value="Not effective: The learning was not relevant to my practice">Not effective: The learning was not relevant to my practice</option>

</select>



<select name="wpProQuiz_field_84" id="forms_10_16" data-required="1" data-type="7" data-form_id="84">
<option selected="selected" value=""></option>
<option value="Very confident">Very confident</option>
<option value="Somewhat confident">Somewhat confident</option>
<option value="Unsure">Unsure</option>
<option value="Not very confident">Not very confident</option>
</select>




Answer

Use :nth-child() Selector instead of :first selector as it selects first matched element.

Selects all elements that are the nth-child of their parent.

$("select option:nth-child(1)").text('Please select an answer...').prop("selected", true);

Note:

Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed

OR, :first-child Selector

$("select option:first-child").text('Please select an answer...').prop("selected", true);

$(document).ready(function() {
  $("select :nth-child(1)").text('Please select an answer...').prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select name="wpProQuiz_field_83" id="forms_10_13" data-required="1" data-type="7" data-form_id="83">

  <option selected="selected" value=""></option>
  <option value="Very effective: The learning will have a major impact on my practice">Very effective: The learning will have a major impact on my practice</option>
  <option value="Effective: The learning will have a minor impact on my practice">Effective: The learning will have a minor impact on my practice</option>
  <option value="Partly effective: The learning confirmed that there was no need to modify my practice/I may modify my practice with further learning">Partly effective: The learning confirmed that there was no need to modify my practice/I may modify my practice with further learning</option>
  <option value="Not effective: The learning was not relevant to my practice">Not effective: The learning was not relevant to my practice</option>

</select>



<select name="wpProQuiz_field_84" id="forms_10_16" data-required="1" data-type="7" data-form_id="84">
  <option selected="selected" value=""></option>
  <option value="Very confident">Very confident</option>
  <option value="Somewhat confident">Somewhat confident</option>
  <option value="Unsure">Unsure</option>
  <option value="Not very confident">Not very confident</option>
</select>

Comments