Question

我有两个这样的选择框。

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

Answer 1

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

Answer 2

要生成另一个change下拉列表的select下拉列表，您最初可以生成包含value和text的对象，以显示第二个下拉列表。

然后在更改第一个选择下拉列表value时，您可以遍历数组并填充第二个下拉列表。

＆＃13;

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));
  });
})

＆＃13;

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

＆＃13;

Answer 3

您可以使用此代码：

以下是工作示例：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 个答案: