将文本添加到所有第一个菜单选项答案

【问题标题】：Add text to all first menu option将文本添加到所有第一个菜单选项
【发布时间】：2016-11-22 02:14:34
【问题描述】：

在我的 HTML 中，我有：

<select>
    <option value></option>
    <option value="1">One</option>
    ...
</select>
<select>
    <option value></option>
    <option value="1">One</option>
    ...
</select>
<select>
    <option value></option>
    <option value="1">One</option>
    ...
</select>
...

所有选择标签都没有 id 或 class。
我想设置第一个选项的文本

例如：

<select>
    <option value>My Text</option>
    <option value="1">One</option>
</select>
<select>
    <option value>My Text</option>
    <option value="1">One</option>
</select>
...

如何用 jQuery 做到这一点？

【问题讨论】：

为什么你不想选择 id 或 class？

标签： jquery html select input

【解决方案1】：

使用 :first-child 伪类选择器获取第一个选项，并使用 text() 方法更新文本内容。

$('select option:first-child').text('My text')

$('select option:first-child').text('My text')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value></option>
  <option value="1">One</option>
</select>

<select>
  <option value></option>
  <option value="1">One</option>
</select>

<select>
  <option value></option>
  <option value="1">One</option>
</select>

【讨论】：

【解决方案2】：

$('select option:nth-child(1)').text('My Text')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value></option>
<option value="1">One</option>
...
</select>

<select>
<option value></option>
<option value="1">One</option>
...
</select>

<select>
<option value></option>
<option value="1">One</option>
...
</select>

...

使用:nth-child(1) 获得第一个选项
使用.text()设置文字

【讨论】：

【解决方案3】：

需要创建一个通用函数，我们必须在其中传递下拉列表的 id 和要为下拉列表的第一个选项添加的文本。请看下面的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<select id="first">
<option value></option>
<option value="1">One</option>
...
</select>

<select id="second">
<option value></option>
<option value="1">One</option>
...
</select>

<select  id="third">
<option value></option>
<option value="1">One</option>
...
</select>

<script type="text/javascript">
    function firstValueSelect(id,value){
        $('#'+id+' option:first-child').text(value);
    }
    firstValueSelect("first","test first");
    firstValueSelect("second","test second");
</script>

【讨论】：