输出不是我理想的东西

-1

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

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

我想使只有2钻头向下按钮index.html中。而如果我在第一个按钮选择A，A-1〜4中示出如果我在第一个按钮中选择B，第二个按钮中会显示b-1〜5。如果我在第一个按钮中选择了C，则第二个按钮中会显示c-1〜2。

因此，输出现在是不同的形式我的理想one.I使用jQuery插件选择。为什么我不能这样做我的理想？哪里不对？为什么我不能过滤到第二个按钮？

来源

2017-09-22 user8634222

@Teemu是的，我想要做的so.but我不明白怎么写。 – user8634222

希望这有助于..

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

来源

2017-09-22 09:21:51

输出不是我理想的东西

回答

相关问题