JavaScript:select1 on-change 填充 select2 中的特定选项(具有 2 个值)

Question

使用以下代码:

$("#select1").change(function() {
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#select2').html(options);
});

工作正常并填充特定选项，但如果我有以下情况该怎么做: select1 中的每个选项都有一个值:

<option value="1">some text</option>

select2 中的每个选项都有两个值:

<option value="1,1">some other text</option>

更新以获得更多说明: 第一个选择是这样的:

 <select id="select1">
    <option value="1">text 1</option>
    <option value="2">text 2</option>
    <option value="3">text 3</option>
    <option value="4">text 4</option>
    <option value="5">text 5</option>
    <option value="6">text 6</option>
    <option value="7">text 7</option>
    ...
 </select>

第二个:

<select id="select2">
    <option value="3">some text ...</option>
    <option value="3">some text ...</option>
    <option value="5">some text ...</option>
    <option value="1">some text ...</option>
    <option value="4">some text ...</option>
    <option value="7">some text ...</option>
    <option value="2">some text ...</option>
    <option value="2">some text ...</option>
    <option value="6">some text ...</option>
    <option value="6">some text ...</option>
    ...
</select>

如果我从select1中选择第二个选项，select2将是这样的

<select id="select2">
    <option value="2">some text ...</option>
    <option value="2">some text ...</option>
</select>

但是，当 select2 选项值类似于(即)时，我正在寻找相同的功能:

<option value="2,24">some text ...</option>

Answer 1

如果我明白你需要什么，你可以使用值进行过滤，当你提交表单时，你需要发送另一个数据

我认为实现您需要的最合适的方法是将第二个选择的选项放入数组中 然后在第一次选择选项时过滤数组 然后构建第二个选择选项

var select2options = [ {filterValue =“1”，text =“一些文本”，itemValue =“2”}， {....}, ... ]

然后当您从 select1 中选择一个项目时

`

$("#select1").change(function() {
        var id = $(this).val();
        var options = select2Options.filter( item => item.filterValue == id);
        var select2HtmlOptions = '';
        for(let i=0;i<options.length;i++){
            select2HtmlOptions+= <option value="itemValue" data- 
            filter="filterValue">text</option>';
        }
        $('#select2').html(select2HtmlOptions);
    });

`

提交后您可以获得

var filter = $( "#select2:selected").data('filter'); var text = $( "#select2:selected").text(); var optionValue = $( "#select2:selected").val()