Question

输出不是我理想的事情。我想做下钻按钮。现在输出是

index.html是

<html>　
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="chosen.jquery.min.js"></script>
    <link href="chosen.css" rel="stylesheet">
  </head>
  <body>
    <select  data-placeholder="Choose" class="chzn-select" style="width:350px;">
      <option value="0">---</option>
      <option value="1" selected>A</option>
      <option value="2">B</option>
      <option value="3">C</option>
      <option value="3">D</option>
    </select>
    <select name="type" id="type1">
      <option value="1">a-1</option>
      <option value="2">a-2</option>
      <option value="3">a-3</option>
      <option value="4">a-4</option>
    </select>
    <select name="type" id="type2">
      <option value="5">b-1</option>
      <option value="6">b-2</option>
      <option value="7">b-3</option>
      <option value="8">b-4</option>
      <option value="9">b-5</option>
    </select>
    <select name="type" id="type3">
      <option value="10">c-1</option>
      <option value="11">c-2</option>
    </select>
    <select name="type" id="type4">
      <option value="10">d-1</option>
      <option value="11">d-2</option>
      <option value="11">d-3</option>
    </select>
  </body>
  <script type="text/javascript">
    $(".chzn-select").chosen();
    $(".chzn-select-deselect").chosen({allow_single_deselect:true});
  </script>
</html>

我想在index.html中只制作2个向下钻取按钮。如果我在第一个按钮中选择A，则在第二个按钮中显示a-1~4。如果我在第一个按钮中选择B，则b-1~5是如果我在第一个按钮中选择C，则在第二个按钮中显示c-1~2····。

所以现在的输出与我理想的输出不同。我在jQuery插件中使用了Chosen。为什么我不能做到这个理想呢？怎么了？为什么我不能过滤到第二个按钮？

Answer 1

希望这会有所帮助..

<html>　
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!--    <script type="text/javascript" src="chosen.jquery.min.js"></script>
    <link href="chosen.css" rel="stylesheet">-->
  </head>
  <body>
    <select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:350px;">
      <option value="0">---</option>
      <option value="1">A</option>
      <option value="2">B</option>
      <option value="3">C</option>
      <option value="4">D</option>
    </select>
      <select name="type" id="type1">
      <option value="1">a-1</option>
      <option value="2">a-2</option>
      <option value="3">a-3</option>
      <option value="4">a-4</option>
    </select>
      <select name="type" id="type2">
      <option value="5">b-1</option>
      <option value="6">b-2</option>
      <option value="7">b-3</option>
      <option value="8">b-4</option>
      <option value="9">b-5</option>
    </select>
    <select name="type" id="type3">
      <option value="10">c-1</option>
      <option value="11">c-2</option>
    </select>
    <select name="type" id="type4">
      <option value="10">d-1</option>
      <option value="11">d-2</option>
      <option value="11">d-3</option>
    </select>

  <script type="text/javascript">
//    $(".chzn-select").chosen();
//    $(".chzn-select-deselect").chosen({allow_single_deselect:true});

        $(document).ready(function () {           

            $('#mainDD').on('change', function() {
              console.log($(this).val());
              console.log($('#mainDD :selected').text()) ;

              var thisType = "type" + $(this).val();              

              for(i=1; i<5; i++) {
                  var thisId = "type" + i;                  
                  console.log(thisType + " " + thisId);                  
                  if(thisType !== thisId) {
                    $("#"+thisId).hide();
                  }
                  else {
                    $("#"+thisId).show();
                  }
              }

            })

        });


  </script>

  </body>
</html>

输出不是我理想的事情

1 个答案: