Javascript 选择时显示/隐藏div

我试图根据选择框的值显示div。但是，在我当前的脚本中，当我更改select的值时，它会显示下一个div，而不会隐藏以前选择的div。我只希望这个JS脚本显示当前选择的div，而不是选择框选择的每个div，即从一个选项切换到另一个选项

js和html

---

首先，将公共类添加到所有div：

<div id="other" class="section"></div>
<div id="contract_bid" class="section"></div>
<!-- and so on ... -->

请注意，使用var val=$this.val只计算一次值更简洁；以后再使用

最后，更好的方法是使用CSS最初隐藏部分，并去掉第一个$'.section'.hide；：

---

可以在显示隐藏的div之前隐藏可见div：

    $(function() {
        $('#contract_bid').hide();
        $('#equipment_purchase').hide();
        $('#hiring_employees').hide();
        $('#marketing').hide();
        $('#expansion').hide();
        $('#working_capital').hide();
        $('#inventory_purchase').hide();
        $('#refinancing').hide();
        $('#other').hide();
        $('#loan_application_requested_purpose').change(function(){
            // here comes the change:
            $('.loan_application_purpose:visible').hide();
            if($('#loan_application_requested_purpose').val() == 'Contract Bid') {
                $('#contract_bid').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Equipment Purchase') {
                $('#equipment_purchase').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Hiring Employees') {
                $('#hiring_employees').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Marketing') {
                $('#marketing').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Expansion/Renovation') {
                $('#expansion').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Working Capital') {
                $('#working_capital').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Inventory Purchase') {
                $('#inventory_purchase').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Refinancing') {
                $('#refinancing').show(); 
            } else {
                $('#other').show(); 
            }
        });
    });

HTML:

---

在这里，您必须在if或elseif条件下隐藏其他div，就像在if中一样

if($('#loan_application_requested_purpose').val() == 'Contract Bid') {

 $('#contract_bid').show(); 
    $('#equipment_purchase').hide();
    $('#hiring_employees').hide();
    $('#marketing').hide();
    $('#expansion').hide();
    $('#working_capital').hide();
    $('#inventory_purchase').hide();
    $('#refinancing').hide();
}

像这样

给所有的div一个类，例如loan\u purpose 将脚本更改为： 提供类的替代方案：如果您的div有一个共同的父级，您可以这样做

$("#parentID > div").hide(); 

而不是

$(".loan_purpose").hide();

替代解决方案：

如果您可以更改值以反映要显示的div的id，那么脚本将更短：

<select id="loan_application_requested_purpose">
  <option value="other">Please select</option>
  <option value="equipment_purchase">Equipment Purchase</option>
  .
  .
  <option value="expansion">Expansion/Renovation</option>
</select>

---

始终隐藏全部，然后显示选定项：

$'trigger'。更改函数{ var selected_id=+$'trigger'.val；//获取要显示的id $'.foo.hide；//全部隐藏 $selected\u id.show；//显示所选 }.更改；//至少运行一次 d1 d2 D1

---

D2在显示curret div时，每次都应该隐藏所有其他div给它们一个类，并执行$.loan.hide，然后再显示相关的OneHanks以获得响应。我在所有的div中添加了一个名为loan_purpose的类。我应该删除我以前使用的div ID吗？@Questifer在显示相关div时需要ID s是的，保留ID，如果您将div的value=ID添加到选择选项中，则可以使用我的代码的更短的第二个版本。我现在可以用了。现在唯一的问题是，您的更新要求我更改选择选项的值。我正在将这些值推送到第三方api，该api在某种程度上要求名称可读，例如Expansion Revolution，而不是Expansion_Revolution。再次感谢您提供了干净的解决方案。

<div id="contract_bid" class="loan_application_purpose"></div>
<div id="equipment_purchase" class="loan_application_purpose"></div>
<div id="hiring_employees" class="loan_application_purpose"></div>
<div id="marketing" class="loan_application_purpose"></div>
<div id="expansion" class="loan_application_purpose"></div>
<div id="working_capital" class="loan_application_purpose"></div>
<div id="inventory_purchase" class="loan_application_purpose"></div>
<div id="refinancing" class="loan_application_purpose"></div>
<div id="other" class="loan_application_purpose"></div>

if($('#loan_application_requested_purpose').val() == 'Contract Bid') {

 $('#contract_bid').show(); 
    $('#equipment_purchase').hide();
    $('#hiring_employees').hide();
    $('#marketing').hide();
    $('#expansion').hide();
    $('#working_capital').hide();
    $('#inventory_purchase').hide();
    $('#refinancing').hide();
}

$(function() {
  $('#loan_application_requested_purpose').on("change",function(){
    $(".loan_purpose").hide();
    // change all spaces to underscore and grab the first part of Expansion/
    var $div = $("#"+$(this).val().toLowerCase().replace(/ /g,"_").split("/")[0]);
    if ($div.length>0) $div.show();
    else $("#other").show(); 
  }).change(); // run change on load to show relevant already selected
});

$("#parentID > div").hide(); 

$(".loan_purpose").hide();

<select id="loan_application_requested_purpose">
  <option value="other">Please select</option>
  <option value="equipment_purchase">Equipment Purchase</option>
  .
  .
  <option value="expansion">Expansion/Renovation</option>
</select>

$(function() {
    $('#loan_application_requested_purpose').on("change",function(){
      $(".loan_purpose").hide();
      $("#"+$(this).val()).show();
    }).change(); // run change on load to show relevant already selected
});