在 Javascript 的下拉列表中隐藏对象

Question

我最近 post 回答了一个问题（感谢大家的帮助！！），如果有人可以帮助我，我会进行跟进。

我想看看是否可以在 Javascript 的下拉列表中隐藏某些元素。这是代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<p>The price is: <span id="price_selected"></span></p>
<script language="JavaScript">
$("option[value='124']").html('1 Box [.95]')
$("option[value='125']").html('2 per Case [.95]')
$("option[value='126']").html('6 per Case [.95]')


$('select').on('change',function(){
str = $("option:selected").html()
var n = str.indexOf("$");
var nx = str.indexOf("]");
var price = str.substring(n+1,nx);

$('#price_selected').html("$"+price);
});
</script>

在这段代码中，我可以隐藏价格以使其不显示在下拉列表中吗？例如，下拉列表将显示“1 Box”，但会输出 "The price is: "12.95”。此外，是否可以在页面加载后立即显示 "The price is: 12.95"（第一个选项）？截至目前，它只会显示 "The price is:"，直到单击下拉菜单。

我刚刚注册了这个论坛，如果有什么不明白的地方，我深表歉意。谢谢！！

编辑：

如果我将其包含在我的 post 中可能会更有帮助。这是下拉框的HTML，不过是自动生成的，无法修改：

<SELECT name="SELECT___TK46BW___9"   onChange="change_option('SELECT___TK46BW___9',this.options[this.selectedIndex].value)">
<OPTION value="124" SELECTED>1 Box</OPTION>
<OPTION value="125" >2 per Case [Add .95]</OPTION>
<OPTION value="126" >6 per Case [Add .00]</OPTION>
</SELECT>

Answer 1

这是一种方法。使用 data 属性 (data-price) 将价格添加到每个 option，然后检索该数据。

我也按照您的要求在加载时添加了所选价格。

$("option[value='124']").html('1 Box').data('price', '12.95');
$("option[value='125']").html('2 per Case').data('price', '22.95');
$("option[value='126']").html('6 per Case').data('price', '62.95');

$('select').on('change', function() {
  str = $("option:selected").data('price')
  $('#price_selected').html("$" + str);
});

// run on load
$('#price_selected').html("$" + $('select option:selected').data('price'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  Choose an amount:
  <select>
    <option value="124"></option>
    <option value="125"></option>
    <option value="126"></option>
  </select>
</p>

<p>
  The price is: <span id="price_selected"></span>
</p>

在 Javascript 的下拉列表中隐藏对象

Hiding an object in a dropdown in Javascript

html

javascript

jquery

drop-down-menu

dropdown