Question

我目前正在处理一个小表单，我想仅在选择某个元素时才显示（切换）特定的div。

这是我的代码：

        <select name="options">
          <option value="">-Please select-</option>
          <option value="buffet">Buffet</option>
          <option value="serviced">Serviced Menu</option>
        </select>

理想情况下，隐藏的div只应在选项＆＃34; Buffet＆＃34;已被选中。

我有什么想法可以实现这一目标？一些专家建议真的很感激。

Answer 1

这样做：

<强> HTML：

<select name="options">
    <option value="">-Please select-</option>
    <option value="buffet">Buffet</option>
    <option value="serviced">Serviced Menu</option>
</select>

<div id="somediv">
    Lorep Ipsum
</div>

<强> JQuery的：

$('select[name="options"]').on('change',function(){
  if ($(this).val().trim() == "buffet") {
    $('#somediv').show();
  } else {
    $('#somediv').hide();
  }
});

<强>样本：

Here is Fiddle DEMO

Answer 2

试试这个：

  $('select[name="options"]').change(function(){
     if($(this).val()=="buffet")
         $('#somediv').show();
     else
         $('#somediv').hide();
  });

<强> Working Demo

Answer 3

试试：

$('select[name="options"]').on('change', function(){
  $('#hiddenDiv').toggle( $(this).val() == 'buffet' );
});

jquery show div基于select选项

3 个答案: