想要根据下拉框选择显示/隐藏 div答案

【问题标题】：Want to show/hide div based on dropdown box selection想要根据下拉框选择显示/隐藏 div
【发布时间】：2014-02-05 17:54:39
【问题描述】：

我想让 jQuery 仅在下拉框中选择“商业用途”时才显示 div id='business'。

这是我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$('#purpose').on('change', function() {
  if ( this.value == '1');
  {
    $("#business").show();
  }
  else
  {
    $("#business").hide();
  }
});
});
</script>
<body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' />
    <br/>
</div>
</body>

和 JSFiddle：http://jsfiddle.net/2kGzZ/1/

【问题讨论】：

标签： javascript jquery html input

【解决方案1】：

将代码包装在 $(document).ready(function(){...........}); 处理程序中，同时删除 if 之后的 ;

$(document).ready(function(){
    $('#purpose').on('change', function() {
      if ( this.value == '1')
      //.....................^.......
      {
        $("#business").show();
      }
      else
      {
        $("#business").hide();
      }
    });
});

Fiddle Demo

【讨论】：

或者放在文档末尾。
有没有办法在没有 javascript 的情况下做同样的事情？

【解决方案2】：

核心问题是js错误：

$('#purpose').on('change', function () {
    // if (this.value == '1'); { No semicolon and I used === instead of ==
    if (this.value === '1'){
        $("#business").show();
    } else {
        $("#business").hide();
    }
});
// }); remove

http://jsfiddle.net/Bushwazi/2kGzZ/3/

我不得不清理 html 和 js...我忍不住。

HTML：

<select id='purpose'>
    <option value="0">Personal use</option>
    <option value="1">Business use</option>
    <option value="2">Passing on to a client</option>
</select>
<form id="business">
    <label for="business">Business Name</label>
    <input type='text' class='text' name='business' value size='20' />
</form>

CSS：

#business {
  display:none;
}

JS：

$('#purpose').on('change', function () {
    if(this.value === "1"){
        $("#business").show();
    } else {
        $("#business").hide();
    }
});

【讨论】：

【解决方案3】：

您需要将代码放在页面末尾或将其包装在文档就绪调用中，否则您会尝试在尚不存在的元素上执行代码。此外，您可以将代码简化为：

$('#purpose').on('change', function () {
    $("#business").css('display', (this.value == '1') ? 'block' : 'none');
});

jsFiddle example

【讨论】：

【解决方案4】：

你的代码有错误unexpected token.use:

  $('#purpose').on('change', function () {
   if (this.value == '1') {
    $("#business").show();
    } else {
    $("#business").hide();
   }

   });

Demo

更新：您可以使用.toggle()缩小代码范围

 $('#purpose').on('change', function () {
   $("#business").toggle(this.value == '1');
 });

【讨论】：

【解决方案5】：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#purpose').on('change', function() {
      if ( this.value == '1')
      //.....................^.......
      {
           $("#business_new").hide();
        $("#business").show();
      }
      else  if ( this.value == '2')
      {
          $("#business").hide();
        $("#business_new").show();
      }
       else  
      {
        $("#business").hide();
      }
    });
});
</script>
<body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' />
    <input type='text' class='text' name='business' value size='20' />
    <br/>
</div>
<div style='display:none;' id='business_new'>Business Name<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value="1254" size='20' />
    <input type='text' class='text' name='business' value size='20' />
    <br/>
</div>
</body>

【讨论】：

【解决方案6】：

试试这个在我的测试演示中对我有用

<script>
$(document).ready(function(){
$('#dropdown').change(function() 
{ 
//  var selectedValue = parseInt(jQuery(this).val());
var text = $('#dropdown').val();
//alert("text");
    //Depend on Value i.e. 0 or 1 respective function gets called. 
    switch(text){
        case 'Reporting':
          // alert("hello1");
   $("#td1").hide();
            break;
        case 'Buyer':
      //alert("hello");
     $("#td1").show();   
            break;
        //etc... 
        default:
            alert("catch default");
            break;
    }
});
});

</script>

【讨论】：

【解决方案7】：

https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-select-box 在我的情况下效果很好

$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<style>
    .box{
        color: #fff;
        padding: 50px;
        display: none;
        margin-top: 10px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

</head>
<body>
    <div>
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

【讨论】：