根据其他选择框的值生成选择框的值答案

【问题标题】：Generate value of select box, based of value from other select box根据其他选择框的值生成选择框的值
【发布时间】：2018-01-06 05:13:27
【问题描述】：

我有两个这样的选择框。

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

【问题讨论】：

标签： javascript jquery forms jquery-selectors

【解决方案1】：

您可以使用select2 中的data-parent 之类的数据属性来识别它是哪个产品的子产品。然后在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>

【讨论】：

【解决方案2】：

您可以使用此代码：

下面是工作示例：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>

【讨论】：

这是一个静态且非常复杂的解决方案。

【解决方案3】：

要在change 上生成另一个select 下拉列表的下拉列表，您可以首先生成包含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>

【讨论】：

感谢您的回复，但我的意思是，当我从第一个选择框中选择产品 1 时，第二个选择框将只包含子产品 1