Показать / скрыть несколько DIV с помощью Выбрать с помощью jQuery

Question

У меня, по сути, такая же ситуация, как у человека в следующем вопросе:

Ссылка: как показать / скрыть div, выбрав. (Jquery)

Благодаря обширному поиску в Google я смог придумать несколько различных методов, с помощью которых люди утверждают, что их метод работает. Я пока не заставлю их работать правильно. Я пока недостаточно разбираюсь в jQuery, чтобы полностью понять, как написать это с нуля, поэтому сейчас я полагаюсь на действительно хорошие примеры.

То, с чем я пытался работать (основываясь на примерах, которые я нашел и попробовал), это:

<script type="text/javascript">
    (document).ready(function() {
        ('.box').hide();<br/>
        ('#dropdown').change(function() {
        ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]()
        ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]()
        ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]()
        });
    });
</script>
<form>
    <select id="dropdown" name="dropdown">
        <option value="0">Choose</option>
        <option value="area1">DIV Area 1</option>
        <option value="area2">DIV Area 2</option>
        <option value="area3">DIV Area 3</option>
    </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

• Примечание. Для правильного отображения в этом сообщении я использую скобки, а не знаки «меньше» и «больше», чем в HTML.

Что я получу при тестировании:

• При первой загрузке, когда ничего не выбрано => DIV не отображается.
• Когда я выбираю DIV Area 1 => Отображаются DIV Area 2 и 3.
• Когда я выбираю DIV Area 2 => Отображаются DIV Area 1 и 3.
• Когда я выбираю DIV Area 3 => Отображаются DIV Area 1 и 2.

Мой мозг жарен на день. Что я могу сделать, чтобы это исправить?

Answer 1

Я бы сделал это:

<script type="text/javascript">
$(document).ready(function(){
 $('.box').hide();
  $('#dropdown').change(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
 });
});
</script>
<form>
 <select id="dropdown" name="dropdown">
  <option value="0">Choose</option>
  <option value="area1">DIV Area 1</option>
  <option value="area2">DIV Area 2</option>
  <option value="area3">DIV Area 3</option>
 </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

Answer 2

@ Фадж дал хорошее решение. но мало сомневаюсь. Это будет зависеть от значения и необходимости каждый раз менять идентификатор атрибута на <div>.

Так что я бы сделал это `

    $(document).ready(function() {
        $('.box').hide();
        $('#dropdown').change(function() {      
            var selectedIdx = (0 == $(this).attr("selectedIndex"))? '' :                 $(this).attr("selectedIndex");
            if("" != selectedIdx){
                $('#divarea'+ selectedIdx ).hide().siblings().show();
            } else {
                $('.box').hide();
            }        
        });
    });
</script>
<form>
    <select id="dropdown" name="dropdown">
        <option value="0">Choose</option>
        <option value="area1">DIV Area 1</option>
        <option value="area2">DIV Area 2</option>
        <option value="area3">DIV Area 3</option>
    </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>
</html>`

Answer 3

Этот код немного более краткий:

$(document).ready
(
  function()
  {
    $("div.box").hide();
    $("#dropdown").change
    (
      function()
      {
        var selectedValue = $(this).val();
        if(selectedValue !== "0")
        {
          $("div.box").show();
          $("#div" + selectedValue).hide();
        }   
      }   
    );
  }
};

По сути, если выбрано значение (т. Е. Для параметра не установлено значение «Выбрать»), отображаются все элементы div.box. DIV, соответствующий выбранной опции, затем скрывается. Это должно произойти достаточно быстро, чтобы вспышка не была заметна.

Answer 4

Поменяйте местами шоу / спрятать, чтобы оно выглядело так:

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]()