Question

我需要在jquery的select下拉列表中添加新选项。例如，我需要在此后的所有三个下拉列表中添加：“ - ”：<option value="">-</option>。我的代码是：

<dd class="birth">
    <select id="options_6054_day" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][day]">
        <option value="">-</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
    </select>
    <select id="options_6054_month" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][month]">
        <option value="">-</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select id="options_6054_year" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][year]">
        <option value="">-</option>
        <option value="2016">2016</option>
    </select>
</dd>

Answer 1

$('#idofselect').find('option:nth-child(1)').after('<option>--</option>')

$（'＃idofselect'） - ＆gt;要添加选项的选择的ID。 如果要添加所有三个，可以使用常用的类全部三个 （为课程添加样本）
.find（'option：nth-child（1）'） - ＆gt;寻找所选择的第一个选项
.after() - ＆gt;描述：插入由内容指定的内容参数，匹配元素集合中的每个元素之后。

$('.select').find('option:nth-child(1)').after('<option>--</option>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="options_6054_day" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][day]">
        <option value="">-</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
    </select>
    <select id="options_6054_month" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][month]">
        <option value="">-</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select id="options_6054_year" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][year]">
        <option value="">-</option>
        <option value="2016">2016</option>
    </select>

Answer 2

如果您想在第一个选项后添加选项，那么我认为这会有所帮助。

$("select option").eq(0).after("<option>--</option")

Answer 3

试试这个

$("select option").each(function(){
   if(this.index == 0){
      $(this).after("<option>--</option")
   }
})

Answer 4

您可以使用此代码：

$(function() {
    $('.product-custom-option').find('option:nth-child(1)').after($('<option></option>').attr("value", '--').text('--'));
})

DEMO

'option:nth-child(1)'将选择select的第一个选项子项。

.after()将在所选元素之后添加您在其中写入的内容。

.attr()将允许您设置选项的属性。

.text()将允许您将文字添加到选项字段。

添加新的下拉选项Jquery

4 个答案: