根据其他 select 框的值生成 select 框的值

Question

我有两个 select 这样的盒子。

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

我想根据我们从第一个 select 框中选择创建第二个 select 框的自动生成值，例如我选择 product 1，第二个 select 框将只包含 sub product 1.

Answer 1

要在另一个 select 下拉菜单的 change 上生成下拉菜单，您首先可以生成包含 value 和 text 的对象以显示第二个下拉菜单。

然后在更改第一个 select 下拉列表 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>

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

Answer 3

您可以使用 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>

根据其他 select 框的值生成 select 框的值

Generate value of select box, based of value from other select box

javascript

forms

jquery

jquery-selectors