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

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

Ссылка: как показать/скрыть элементы 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 отображаются.

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


html hide jquery select show
person Community    schedule 11.09.2009    source источник
comment
Не ответ на ваш вопрос, но изучите метод jQuery # toggle для условного скрытия/отображения.   -  person Chetan S    schedule 12.09.2009

Ответы (4)


arrow_upward
10
arrow_downward

я бы сделал так:

<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>
person Mottie    schedule 11.09.2009
comment
Прочитав предложенный вами код, я понял, что в моих трех строках, таких как: ('#divarea1')[ ($(this).val() == 'area1') ? 'скрыть' : 'показать' ](); Сначала я забыл конечную точку с запятой. Возможно, это вызвало некоторые проблемы, с которыми я столкнулся. Однако я опробовал ваш код, и он выполняет именно то, что я искал. Благодарю вас! - person ; 14.09.2009
comment
Если у вас есть ответ, не могли бы вы закрыть вопрос, поставив отметку рядом с номером, спасибо :) - person Mottie; 18.09.2009
comment
как это будет работать, если вы хотите, чтобы при загрузке страницы отображался div, соответствующий выбранному элементу раскрывающегося списка? то есть я устанавливаю выбранный элемент на стороне сервера, а затем, когда страница отображается, показываю соответствующий div (в отличие от всех или ни одного из них). Спасибо! - person Mark Richman; 24.03.2010
comment
@Mark Richman: Если вы добавите выбранный атрибут на сервер опций, просто добавьте его под строкой $('.box').hide(); (внутри функции готовности документа).... $('#div' + $('#dropdown').val()).show(); - person Mottie; 24.03.2010

arrow_upward
3
arrow_downward

@fudgey дал хорошее решение. но мало сомневаюсь. Это зависит от значения и требует каждый раз менять идентификатор атрибута <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>`
person Bit Curios    schedule 13.05.2011

arrow_upward
1
arrow_downward

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

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]()
person T. Stone    schedule 11.09.2009
comment
Прошу прощения за то, что не уловил это, когда я первоначально опубликовал... В моем рабочем коде присутствуют знаки доллара. Должно быть, они были удалены, когда я разместил свой код. - person ; 14.09.2009

arrow_upward
1
arrow_downward

Этот код немного короче:

$(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, соответствующий выбранному параметру, скрывается. Это должно происходить достаточно быстро, чтобы вспышка не была заметна.

person David Andres    schedule 11.09.2009
comment
Возможно, вы неправильно поняли. Я не хочу, чтобы ЛЮБОЙ из элементов DIV отображался изначально. Я хочу, чтобы ONE отображался только после того, как был сделан выбор. - person ; 14.09.2009
comment
@Thomas Grant: Разве $(div.box).hide() не загружает элементы на странице? - person David Andres; 14.09.2009