Question

我有一些代码可以更改选择字段中选项的文本。我在具有可变ID的页面上有多个选择字段，因此我无法单独定位每个字段。目前我似乎只是针对页面上的第一个选择字段，但我需要这个循环页面上的每个选择字段。我错过了什么？

＆＃13;

$( 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);

});

＆＃13;

<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>

＆＃13;

Answer 1

使用:nth-child() Selector代替:first选择器，因为它会选择第一个匹配的元素。

选择所有父元素的第n个子元素。

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

注意：

因为jQuery的:nth- selectors实现严格来自CSS规范，n的值是＆＃34; 1-indexed

或，:first-child Selector

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

＆＃13;

$(document).ready(function() {
  $("select :nth-child(1)").text('Please select an answer...').prop("selected", true);
});

＆＃13;

<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>

＆＃13;

Answer 2

检查其中任何一个。

$("select option:first-child").text('Please select an answer...');
// or
$("select").find('option:first').text('Please select an answer...');
// or
$("select").find('option:eq(0)').text('Please select an answer...');

＆＃13;

$(document).ready(function() {
  $("select option:first-child").text('Please select an answer...');
  //$("select").find('option:first').text('Please select an answer...');
  //$("select").find('option:eq(0)').text('Please select an answer...');
});

＆＃13;

<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>

＆＃13;

目标所有选择字段不仅仅是首先使用JS / jQuery

2 个答案: