ONSELECT顯示/隱藏新的選擇

Question

因爲我有這樣

id - id_parent - name 
1 - 0   - root 
2 - 1   - child_1 
3 - 1   - child_2 
4 - 3   - child_31 
5 - 3   - child_32 
6 - 2   - child_21 

我要創建一個選擇「ONSELECT」顯示出與孩子一個新的選擇

然後首先從數據庫中選擇一個數據庫是

<select> 
<option>empty</option> 
<option>root</option> 
</select> 

根選擇，在底部的新選擇是

<select> 
<option>child_1</option> 
<option>child_2</option> 
<select> 

我試圖做到這一點與jQuery的...

Answer 1

看到這個代碼我解決您的問題，我認爲這將幫助你做這項工作

https://plnkr.co/edit/ckEIglujjD9OIOqeT6l5?p=preview

<h1>Hello Plunker!</h1> 

    <select id="parent"> 
    <option value="0">empty</option> 
    <option value="1">root</option> 
    </select> 

    <select id="child"> 

    </select> 

    <script> 
    $(document).ready(function() { 
     var info = [{ 
      id: 1, 
      parent: 0, 
      name: 'root' 
     }, { 
      id: 2, 
      parent: 1, 
      name: 'child_1' 
     }, { 
      id: 3, 
      parent: 1, 
      name: 'child_2' 
     }, { 
      id: 4, 
      parent: 3, 
      name: 'child_31' 
     }, { 
      id: 5, 
      parent: 3, 
      name: 'child_32' 
     }, { 
      id: 6, 
      parent: 2, 
      name: 'child_21' 
     } 


     ]; 


     $("#parent").on('click', function() { 

     var nowValue = $(this).val(); 
     $("#child").html(""); 
     $.each(info, function(index, value) { 
      if (value.parent == nowValue) { 

      var option = $('<option/>'); 
      option.attr({ 
       'value': value.id 
      }).text(value.name); 
      $('#child').append(option); 
      } 
     }); 

     }); 


    }); 
    </script>