生成选择框的值，根据从其他选择框

值我有这样两个选择框。生成选择框的值，根据从其他选择框

<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

生成选择框的值，根据从其他选择框

回答

相关问题