生成選擇框的值，根據從其他選擇框

值我有這樣兩個選擇框。生成選擇框的值，根據從其他選擇框

<select id="select1"> 
    <option value="1">product 1</option> 
    <option value="2">product 2</option> 
    <option value="3">product 3</option> 
</select> 

<select id="select2"> 
    <option value="1">sub product 1</option> 
    <option value="2">sub product 2</option> 
    <option value="3">sub product 1</option> 
    <option value="4">sub product 1</option> 
    <option value="5">sub product 3</option> 
</select>

我想創建自動生成基於我們第二個選擇框的值從第一個選擇框中，選擇前我選擇product 1，第二個選擇框將只包含sub product 1。

來源

2017-07-30 Def

可以使用此代碼：

下面是工作示例：https://output.jsbin.com/ronoteb

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
    var options=""; 
    $("#select1").on('change',function(){ 
     var value=$(this).val(); 
     if(value=="1") 
     { 
      options="<option>Select 2</option>" 
        +"<option value='1'>sub product 1</option>" 
        +"<option value='2'>sub product 2</option>"; 
      $("#select2").html(options); 
     } 
     else if(value=="2") 
     { 
      options="<option>Select 2</option>" 
        +"<option value='3'>sub product 3</option>" 
        +"<option value='4'>sub product 4</option>"; 
      $("#select2").html(options); 
     } 
     else if(value=="3") 
     { 
      options="<option>Select 2</option>" 
        +"<option value='5'>sub product 5</option>" 
        +"<option value='6'>sub product 6</option>"; 
      $("#select2").html(options); 
     } 
     else 
      $("#select2").find('option').remove() 
    }); 
    }); 
    </script> 
</head> 
<body> 
<select id="select1"> 
    <option value="" selected>select</option> 
    <option value="1">product 1</option> 
    <option value="2">product 2</option> 
    <option value="3">product 3</option> 
</select> 

<select id="select2"> 
</select> 
</body> 
</html>

來源

2017-07-30 16:53:01

謝謝BROT ..大 – Def

這是一個靜態和非常複雜的解決方案。 – Azim

要生成另一個select下拉的change下拉，就可以開始，產生含有value和text以顯示第二個下拉的對象。

然後在第一選擇下拉value的變化，可以通過陣列迭代並填充所述第二下拉。

let selectOptions = { 
 
    1: [{ 
 
    value : "1", 
 
    text: "sub product 1" 
 
    }], 
 
    2: [{ 
 
    value : "2", 
 
    text: "sub product 2" 
 
    }], 
 
    3: [{ 
 
    value : "3", 
 
    text: "sub product 3" 
 
    }] 
 
} 
 

 
$("#select1").change(function(){ 
 
    let select2 = $("#select2"); 
 
    select2.empty(); 
 
    console.log(selectOptions[$(this).val()]); 
 
    selectOptions[$(this).val()].forEach(function(item){ 
 
    select2.append($("<option />").val(item.value).text(item.text)); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select1"> 
 
    <option value="1">product 1</option> 
 
    <option value="2">product 2</option> 
 
    <option value="3">product 3</option> 
 
</select> 
 

 
<select id="select2"> 
 
    <option value="1">sub product 1</option> 
 
    <option value="2">sub product 2</option> 
 
    <option value="3">sub product 3</option> 
 
<option value="4">sub product 4</option> 
 
<option value="5">sub product 5</option> 
 
</select>

來源

2017-07-30 16:45:20

感謝您的答覆，但我的意思是，當我選擇產品1從第一個選擇框中，第二個選擇框將只包含子產品1 – Def

可以使用像data-parent數據屬性在select2用於識別產品的子產品。然後在select1變化事件中，你可以使用filter方法和屬性data-parent隱藏和顯示選項，如以下。

$('#select1').change(function() { 
 
    var parent = $(this); 
 
    
 
    var visibleOptions = $('#select2 option').hide().filter(function() { 
 
     return $(this).data('parent') == parent.val(); 
 
    }).show(); 
 
      
 
    if(visibleOptions.length) 
 
     visibleOptions.eq(0).prop('selected', true); 
 
    else 
 
     $('#select2').val(''); 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select1"> 
 
    <option value="1">product 1</option> 
 
    <option value="2">product 2</option> 
 
    <option value="3">product 3</option> 
 
</select> 
 

 
<select id="select2"> 
 
    <option data-parent="1" value="1">sub product 1</option> 
 
    <option data-parent="2" value="2">sub product 2</option> 
 
    <option data-parent="1" value="3">sub product 1</option> 
 
    <option data-parent="1" value="4">sub product 1</option> 
 
    <option data-parent="3" value="5">sub product 3</option> 
 
</select>

來源

2017-07-30 17:08:16 Azim

生成選擇框的值，根據從其他選擇框

回答

相關問題