在選擇時顯示/隱藏div

Question

我試圖顯示div取決於選擇框處於哪個值。 使用我當前的腳本，它可以正常工作，但是，當我更改select的值時，它將顯示下一個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>

Answer 1

像這樣

1. 給所有div一個類，例如“ loan_purpose”
2. 將腳本更改為此：

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

Answer 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();只計算一次值更干凈var val = $(this).val(); 稍后再使用。

最后甚至更好的方法是使用CSS最初隱藏部分（並擺脫第一個$('.section').hide(); ）：

.section {
    display: none;
}

Answer 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
    {
    ...

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

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

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