选择时显示/隐藏 div答案

【问题标题】：Show/hide div on select选择时显示/隐藏 div
【发布时间】：2014-11-17 23:35:04
【问题描述】：

我试图根据选择框所在的值来显示 div。但是，使用我当前的脚本它正在工作，当我更改选择的值时，它会显示下一个 div 而不会隐藏先前选择的一个。我只希望这个 JS 脚本显示当前选择的 div，而不是选择框选择的每个 div（即从一个选项切换到另一个选项）。

js和html

 <script>
        $(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(){
                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(); 
                }
            });
        });
    </script>

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

【问题讨论】：

在显示当前 div 时，您应该每次都隐藏所有其他 div
给他们上一堂课，然后做$(".loan").hide()，然后再选择相关的

标签： javascript

【解决方案1】：

像这样

给所有的 div 一个类，例如“loan_ purpose”
将您的脚本更改为：

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

提供类的替代方法：如果你的 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>

那么我的脚本只需要

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

【讨论】：

感谢您的回复。我为所有的 div 添加了一个类，称为 loan_ purpose。我应该删除 div ID（我之前使用的）吗？
@Questifer 显示相关 div 时需要 id
是的，保留 ID，如果您将 value="id of div to show" 添加到选择选项中，可以使用我的代码的更短的第二个版本
没关系。我现在可以工作了。现在唯一的问题是，随着您的更新，您需要我更改选择选项的值。我正在将值推送到第三方 api，这在某种程度上需要名称可读（例如，Expansion Renovation 而不是 Expansion_renovation）。
再次感谢干净的解决方案。

【解决方案2】：

首先为所有 div 添加公共类：

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

然后它会让你减少你的代码：

$(function () {
    $('.section').hide();

    $('#loan_application_requested_purpose').change(function () {

        $('.section').hide();

        var val = $(this).val();

        if (val == 'Contract Bid') {
            $('#contract_bid').show();
        } else if (val == 'Equipment Purchase') {
            $('#equipment_purchase').show();
        }
        // other checks ....
        else {
            $('#other').show();
        }
    });
});

请注意，使用var val = $(this).val(); 只计算一次值并在以后使用它会更简洁。

最后更好的是使用 CSS 最初隐藏部分（并摆脱第一个 $('.section').hide();）：

.section {
    display: none;
}

【讨论】：

【解决方案3】：

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

    if($('#loan_application_requested_purpose').val() == 'Contract Bid') {
         $("#myDivs div").hide()                    
        $('#contract_bid').show(); 
    }else
    {
    ...

【讨论】：

【解决方案4】：

您可以在显示隐藏的 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：

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

【讨论】：

【解决方案5】：

总是隐藏所有然后显示选中：

$( '#trigger' ).change( function() {
  var selected_id = '#' + $('#trigger').val(); // Grab the ID to show
  $( '.foo' ).hide();                          // Hide all
  $( selected_id ).show();                     // Show selected
} ).change();                                  // Run at least once

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="trigger">
  <option>d1</option>
  <option>d2</option>
</select>

<div id="d1" class="foo">D1</div>
<div id="d2" class="foo">D2</div>

【讨论】：

【解决方案6】：

在这里，您必须在 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();
}

【讨论】：