Мне нужна помощь в этом.

Я не эксперт в JQUERY, но я хочу показать определенное количество полей div в соответствии с выпадающим списком выбора со списком чисел в нем. По какой-то причине мой код не работает. Пожалуйста, сообщите мне, где я поступил неправильно. Заранее спасибо! 🙂

Ниже мой HTML:

 <select id="dropDown">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>
<div id="box-container" class="boxes">
  <div id="1" class="box"></div>
  <div id="2" class="box"></div>
  <div id="3" class="box"></div>
  <div id="4" class="box"></div>
  <div id="5" class="box"></div>
  <div id="6" class="box"></div>
</div>
  

Ниже приведен мой JQUERY:

 $('#dropDown').change(function(){
    if ($('#dropDown').val() = '0')
    {

    }
    else if ($('#dropDown').val() = '1')
    {
        $('#1').show();
    }
    else if ($('#dropDown').val() = '2')
    {
        $('#1').show();
        $('#2').show();
    }
    else if ($('#dropDown').val() = '3')
    {
        $('#1').show();
        $('#2').show();
        $('#3').show();
    }
    else if ($('#dropDown').val() = '4')
    {
        $('#1').show();
        $('#2').show();
        $('#3').show();
        $('#4').show();
    }
    else if ($('#dropDown').val() = '5')
    {
        $('#1').show();
        $('#2').show();
        $('#3').show();
        $('#4').show();
        $('#5').show();
    }
    else if ($('#dropDown').val() = '6')
    {
        $('#1').show();
        $('#2').show();
        $('#3').show();
        $('#4').show();
        $('#5').show();
        $('#6').show();

    }
});
  

И это CSS для разделов:

 .boxes div {
  display: none;
  width: 40px;
  height: 40px;
  background-color: orange;
  margin:10px;
}
  

Спасибо 🙂

Ваша попытка:

 if ($('#dropDown').val() = 0) {
  

Что вы хотите сделать, это:

 if ($('#dropDown').val() == 0) { ... etc
  

Когда вы используете ‘=’, это присваивает значение некоторой переменной. ‘==’ используется для сравнения, так что это то, что вы хотите использовать здесь.

Я сделал быструю демонстрацию этой работы, если у вас есть какие-либо вопросы, не стесняйтесь задавать мне. Это довольно просто, и я постарался сделать код подробным, чтобы облегчить понимание.

http://codepen.io/Leth0_/pen/HiruJ

 $("#dropDown").change(function(){
  var x = parseInt($(this).val());
  var element = $("#box-container").children();
  $(element).css({display:"none"});
  for(i = 0; i < x; i  ){
    $(element[i]).css({display:"block"});
    }
});
  

вы должны использовать «==», а не «=» в своих операторах if.

Вставьте это после change строки:

 var value = $('#dropDown').val();
  

А затем использовать их для операторов if и else, подобных таким:

 if (value == '1')
  

Примечание: Используйте два = вместо одного 🙂

= используется для присвоения значения переменной.

== используется для сравнения.

Также я не думаю, что вам нужен if оператор для value == "0" , поэтому вы можете просто удалить его. Поддерживайте чистоту своего кода!

ДЕМОНСТРАЦИЯ

попробуйте это:

 $('#dropDown').change(function(){
     $(".box").hide();
     for(var i=1;i<=parseInt($(this).val());i  ){
          $("#" i).show();
     }
});
  

Я бы не стал использовать число в качестве идентификатора.