javascript - 添加新的下拉选项 Jquery

Question

我需要使用 jquery 在选择下拉列表中添加新选项。例如，我需要在这之后的所有三个下拉列表中添加:“--”:<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>')

1. $('#idofselect') -> 您要添加选项的选择的 ID。 如果你想添加所有三个，你可以使用通用的类所有三个 (为类添加示例)
2. .find('option:nth-child(1)') -> 在选定的选择中查找第一个选项
3. > .after() -> 描述:插入内容，由参数，在匹配元素集中的每个元素之后。

$('.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>