輸出不是我理想的東西

-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

輸出不是我理想的東西

回答

相關問題