DEMO

Question

我需要帮助。

我不是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();

    }
});

这是div的CSS：

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

谢谢：）

Answer 1

你的尝试：

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

您想要做的是：

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

使用＆＃39; =＆＃39;时，会为某个变量赋值。＆＃39; ==＆＃39;用于比较，所以这是你想在这里使用的。

Answer 2

在change行之后插入此内容：

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

然后在if和else语句中使用这些：

if (value == '1')

注意：使用两个=而不是一个：）

=用于为变量赋值。

==用于比较。

另外，我认为您不需要if的{{1}}声明，因此您可以将其删除。保持代码清洁！

DEMO

Answer 3

你应该在你的if语句中使用“==”而不是“=”。

Answer 4

试试这个：

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

我不会使用数字作为id。

Answer 5

如果您有任何问题请随时问我，我已经快速演示了这项工作。这是相当直接的，我试图让代码冗长以帮助理解。

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

JQuery - 根据下拉选择显示一定数量的DIV

5 个答案:

DEMO