Question

我有一个包含两个选项的表单。我很想知道如何根据前一个选择中的值显示第二个选择选项。

我的表单html是

<option class="sf-level-0 sf-item-0" selected="selected" data-sf-depth="0" value="">All Items</option>
<option class="sf-level-0 sf-option-active" data-sf-count="-1" data-sf-depth="0" value="2 A">2 A</option>
<option class="sf-level-0" data-sf-count="-1" data-sf-depth="0" value="4 B">4 B</option>

<option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-depth="0" value="">All Items</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="25 A">25 A</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="40 A">40 A</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="63 A">63 A</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="80 A">80 A</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="100 A">100 A</option>

例如：

如果用户选择第一个是值=＆＃34; 2 A＆＃34;

第二个选项仅显示某些选项，例如

<option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-depth="0" value="">All Items</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="25 A">25 A</option>
<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0" value="40 A">40 A</option>

此表单由WordPress插件生成。所以我无法在该选项中添加任何类名。

非常感谢。

Answer 1

好吧，这确实是丑陋的，但如果你的选择有不同的ID，它确实有效，如果他们没有这样做不会工作https://jsfiddle.net/calder12/jpec347e/1/

基本上你要做的是为第一个选择框中的每个选项创建值数组，然后为所有选项创建一个数组，然后根据第一个选项框的值动态填充第二个选择框。

var allOptions = ["25 A", "40 A", "63 A", "80 A", "100A"];
var twoAOptions = ["63 A", "80 A", "100A"];
var fourBOptions = ["25 A", "40 A"];

$("#select1").on("change", function() {
    if($(this).val() === "2 A") {
    $("#select2").find("option").remove().end().append('<option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-depth="0" value="">All Items</option>');
    for(i=0; i <= twoAOptions.length -1; i++){
        var option = '<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"  value="'+twoAOptions[i]+'">'+twoAOptions[i]+'</option>';
        $('#select2').append(option);
    }
  } else if($(this).val() === "4 B") {
    $("#select2").find("option").remove().end().append('<option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-depth="0" value="">All Items</option>');
    for(i=0; i <= fourBOptions.length -1; i++){
        var option = '<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"  value="'+fourBOptions[i]+'">'+fourBOptions[i]+'</option>';
        $('#select2').append(option);
    }
  } else {
    $("#select2").find("option").remove().end().append('<option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-depth="0" value="">All Items</option>');
    for(i=0; i <= allOptions.length -1; i++){
        var option = '<option class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"  value="'+allOptions[i]+'">'+allOptions[i]+'</option>';
        $('#select2').append(option);
    }
   }
})

就像我说的，这不是一个非常优雅的解决方案，但它应该可以正常工作。

显示下一个选择基于上一个选择值的选项

1 个答案: