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 Box”，但将输出“价格为：”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

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

我还按照您的要求添加了选定的加载价格。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: