Показать/скрыть div on select

Я пытаюсь показать div в зависимости от того, какое значение находится в поле выбора. Однако, когда мой текущий скрипт работает, когда я изменяю значение select, он показывает следующий div, не скрывая ранее выбранный. Я хочу, чтобы этот JS-скрипт показывал текущий выбранный div, а не каждый div, который выбирается в поле выбора (т.е. переключение с одного параметра на другой).Показать/скрыть div on select

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>

источник

2014-11-17 Questifer

Показывая curret DIV, вы должны скрыть все другие дивы каждый время –

Дайте им все класс и сделайте '$ (". loan "). hide()' before sho с соответствующим – mplungjan

Как это

Дайте всем дивы класс, например, «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 
});

Альтернатива давая класс: если ваши дивы имеют общего родителя, вы можете сделать

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

источник

2014-11-17 14:28:38 mplungjan

Спасибо за ответ. Я добавил класс для всех разделов, называемых loan_purpose. Должен ли я удалить идентификаторы div (что я использовал раньше)? – Questifer

@Questifer Вам нужно id s при показе релевантного div –

Да, сохраните идентификаторы, и если вы добавите id div = value для отображения «' к параметрам выбора, можно использовать гораздо более короткую вторую версию моего кода – mplungjan

Прежде всего добавить общий класс для всех дивы:

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

источник

2014-11-17 14:26:11 dfsq

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

источник

2014-11-17 14:27:09

вы можете скрыть видимые 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>

источник

2014-11-17 14:27:55 Noy

-2

Здесь, вы должны скрыть другие div в случае или ELSEIF состояние, как в случае

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

источник

2014-11-17 14:27:59

Всегда скрыть все то показать выбранные:

$('#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>

источник

2014-11-17 14:32:05

Показать/скрыть div on select

ответ

Смежные вопросы