Javascript 输出不是我理想的东西_Javascript_Jquery_Html

Javascript 输出不是我理想的东西

javascript jquery html

Javascript 输出不是我理想的东西,javascript,jquery,html,Javascript,Jquery,Html,输出不是我理想的东西。我想做向下钻取按钮。现在输出是 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.mi

输出不是我理想的东西。我想做向下钻取按钮。现在输出是

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>

　
---
A.
B
C
D
a-1
a-2
a-3
a-4
b-1
b-2
b-3
b-4
b-5
c-1
c-2
d-1
d-2
d-3
$（“.chzn select”）.select（）；
$（“.chzn select deselect”）.selected（{allow_single_deselect:true}）；

我想在index.html中只做2个向下钻取按钮。如果我在第一个按钮中选择A，A-1~4显示在第二个按钮中。如果我在第一个按钮中选择B，B-1~5显示在第二个按钮中。如果我在第一个按钮中选择C，C-1~2显示在第二个按钮中・・・・.

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

希望这有帮助

<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>

　
---
A.
B
C
D
a-1
a-2
a-3
a-4
b-1
b-2
b-3
b-4
b-5
c-1
c-2
d-1
d-2
d-3
//$（“.chzn select”）.select（）；
//$（“.chzn select deselect”）.selected（{allow_single_deselect:true}）；
$（文档）.ready（函数（）{
$（'mainDD'）。on（'change'，function（）{
log（$（this.val（））；
console.log（$（'#mainDD:selected'）.text（）；
var thisType=“type”+$（this.val（）；
对于（i=1；i@Teemu是的，我想写。但是我不懂怎么写。