javascript - 附加除第一个值之外的所有选项文本

Question

是否可以将文本添加到下拉列表中除第一个值之外的每个选项的末尾[option value="0"]？

<select name="DdlStockOptions" id="DdlStockOptions" class="stock-dropdown" _flx1_12_1="1" _flx1_13_1="1">
            <option value="0">Make Your Selection</option>
            <option value="127285">Pink</option>
            <option value="127286">Yellow </option>
            <option value="127287">Green </option>
            <option value="127288">Purple </option>
        </select>

我使用以下 JS 将“- In Stock”附加到末尾，但它出现在每个值上，包括我试图避免的“Make Your Selection”:

    $("#DdlStockOptions option").append('- In Stock');

Answer 1

我会选择将默认选项标记为已禁用和已选择(因此默认情况下会选择它)，然后仅附加到未已禁用<的元素，使用$(...).not()功能:

$("#DdlStockOptions option").not("[disabled]").append(" - In Stock")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="DdlStockOptions" id="DdlStockOptions" class="stock-dropdown" _flx1_12_1="1" _flx1_13_1="1">
  <option value="0" disabled selected>Make Your Selection</option>
  <option value="127285">Pink</option>
  <option value="127286">Yellow </option>
  <option value="127287">Green </option>
  <option value="127288">Purple </option>
</select>

如果您不想禁用默认选项，也可以在此处使用 .not("[selected]"):

$("#DdlStockOptions option").not("[selected]").append(" - In Stock")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="DdlStockOptions" id="DdlStockOptions" class="stock-dropdown" _flx1_12_1="1" _flx1_13_1="1">
  <option value="0" selected>Make Your Selection</option>
  <option value="127285">Pink</option>
  <option value="127286">Yellow </option>
  <option value="127287">Green </option>
  <option value="127288">Purple </option>
</select>