将对象隐藏在JavaScript中的下拉中

Question

我最近发布了一个问题（谢谢大家的所有帮助！），如果有人可以帮助我，请随访。

我想看看是否可以将某些元素隐藏在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 [$12.95]')
$("option[value='125']").html('2 per Case [$22.95]')
$("option[value='126']").html('6 per Case [$62.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个框"，但是输出"价格为：" 12.95"。此外，是否有可能在页面加载后立即显示"价格为：12.95"（第一个选项）？截至目前，它只说"价格为："，直到单击下拉为止。

我刚刚签署了这个论坛，因此，如果有任何东西似乎模糊的话，很抱歉。谢谢！

编辑：

如果我将其包含在帖子中，可能会更有帮助。这是下拉框的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 $10.95]</OPTION>
<OPTION value="126" >6 per Case [Add $50.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>