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将“-库存”附加到末尾，但它出现在每个值上，包括我要避免的“进行选择”：

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

Answer 1

我会选择将默认选项标记为disabled和selected（因此默认情况下处于选中状态），然后使用{{3 }}函数：

disabled

$("#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")

Answer 2

 $("#DdlStockOptions :not(:first-child)").append('- In Stock');

这将根据请求选择除第一个孩子以外的所有内容。它使用伪类来排除选择器的第一个子代，从而保留所有其他选项，而无需在html中添加任何内容。

我强烈建议您禁用第一个选项，以避免其他问题，并确保也在服务器端验证您的代码。

Answer 3

在不更改HTML的情况下，您可以循环使用除0以外的其他所有选项并添加所需的内容

  
  $("#DdlStockOptions option").each(function()
{
    if ($(this).val() != '0')
			{ 
      	$(this).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">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>

演示： jsfiddle

Answer 4

使用本机JavaScript，您可以使用document.querySelectorAll并使用not选择器来定位除第一个选项以外的所有选项

let x = document.querySelectorAll('#DdlStockOptions option:not([value="0"]');
x.forEach(function(item) {
  item.innerHTML = item.innerHTML + '- In Stock'
})

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

附加所有选项文本（第一个值除外）

4 个答案: