如何 Refresh/reload Select 下拉选项

Question

我有 3 个相互链接的下拉菜单（品牌、参数、子品牌）。第三个下拉菜单的（“子品牌”）选项应基于第一个菜单（品牌）中选择的选项。

这部分的jquery如下：

jQuery("#Brand, #Parameter").on('change', function () {
    jQuery("#SubBrands").val(null).trigger('change');
      if ($("#Brand").val() == 'Brand1' && $("#Parameter").val() == 'ShowBrands') {
        jQuery ('#SubBrands option').filter('option[value="SubBrand1Hide"]').hide();
      }
      if ($("#Brand").val() == 'Brand2' && $("#Parameter").val() == 'ShowBrands') {
        jQuery ('#SubBrands option').filter('option[value="SubBrand2Hide"]').hide();
      }
      if ($("#Brand").val() == 'Brand3' && $("#Parameter").val() == 'ShowBrands') {
        jQuery ('#SubBrands option').filter('option[value="SubBrand3Hide"]').hide();
      }
      if ($("#Brand").val() == 'Brand4' && $("#Parameter").val() == 'ShowBrands') {
        jQuery ('#SubBrands option').filter('option[value="SubBrand4Hide"]').hide();
      }
      $("#SubBrands").val([]);
    });

虽然根据需要隐藏了相应的 'SubBrands'，但当我更改主 'Brand' 并重新查看 'SubBrand' 下拉菜单时，之前隐藏的 'SubBrand' 没有再现。每次主要 'Brand' 选择更改时，我都需要刷新此菜单。

整个工作代码如下：

jQuery(document).ready(function($) {
  jQuery("#Parameter").on('change', function() {
    if (this.value == "ShowBrands") {
      $("#SubBrandBox").show();
    } else {
      $("#SubBrandBox").hide();
    }
  });
  jQuery("#Brand, #Parameter").on('change', function() {
    jQuery("#SubBrands").val(null).trigger('change');
    if ($("#Brand").val() == 'Brand1' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand1Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand2' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand2Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand3' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand3Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand4' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand4Hide"]').hide();
    }
    $("#SubBrands").val([]);
  });

});

.hide {
  display: none
}

</style></head><body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  Which Brand:
  <select id="Brand">
    <option></option>
    <option value="Brand1">Brand1</option>
    <option value="Brand2">Brand2</option>
    <option value="Brand3">Brand3</option>
    <option value="Brand4">Brand4</option>
  </select>
  </br>
  Parameter
  <select id="Parameter">
    <option></option>
    <option value="ShowBrands">Show Sub-Brands</option>
    <option value="HideBrands">Hide Sub-Brands</option>
  </select>
  </br>
  <div id="SubBrandBox" style="display: none;">
    Sub-Brands
    <select id="SubBrands">
      <option></option>
      <option value="SubBrand1Hide">AAAA</option>
      <option value="SubBrand2Hide">BBBB</option>
      <option value="SubBrand3Hide">CCCC</option>
      <option value="SubBrand4Hide">DDDD</option>
    </select>
  </div>
</body>

Answer 1

您需要先显示所有选项，然后隐藏特定选项：

jQuery(document).ready(function($) {
  jQuery("#Parameter").on('change', function() {
    if (this.value == "ShowBrands") {
      $("#SubBrandBox").show();
    } else {
      $("#SubBrandBox").hide();
    }
  });
  jQuery("#Brand, #Parameter").on('change', function() {
    jQuery("#SubBrands").val(null).trigger('change');
    
    // Show all options here
    jQuery('#SubBrands option').show();
    
    if ($("#Brand").val() == 'Brand1' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand1Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand2' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand2Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand3' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand3Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand4' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand4Hide"]').hide();
    }
    $("#SubBrands").val([]);
  });

});

.hide {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  Which Brand:
  <select id="Brand">
    <option></option>
    <option value="Brand1">Brand1</option>
    <option value="Brand2">Brand2</option>
    <option value="Brand3">Brand3</option>
    <option value="Brand4">Brand4</option>
  </select>
  </br>
  Parameter
  <select id="Parameter">
    <option></option>
    <option value="ShowBrands">Show Sub-Brands</option>
    <option value="HideBrands">Hide Sub-Brands</option>
  </select>
  </br>
  <div id="SubBrandBox" style="display: none;">
    Sub-Brands
    <select id="SubBrands">
      <option></option>
      <option value="SubBrand1Hide">AAAA</option>
      <option value="SubBrand2Hide">BBBB</option>
      <option value="SubBrand3Hide">CCCC</option>
      <option value="SubBrand4Hide">DDDD</option>
    </select>
  </div>
</body>

下面的代码片段是我所做的一些重构。它缩短了您的病情：

jQuery('#SubBrands option').show();
if ($("#Parameter").val() == 'ShowBrands') {
  let branch = $("#Brand").val();
  jQuery('#SubBrands option').filter(`option[value="Sub${branch}Hide"]`).hide()
}

jQuery(document).ready(function($) {
  jQuery("#Parameter").on('change', function() {
    if (this.value == "ShowBrands") {
      $("#SubBrandBox").show();
    } else {
      $("#SubBrandBox").hide();
    }
  });
  jQuery("#Brand, #Parameter").on('change', function() {
    jQuery("#SubBrands").val(null).trigger('change');
    
    jQuery('#SubBrands option').show();
    if ($("#Parameter").val() == 'ShowBrands') {
      let branch = $("#Brand").val();
      jQuery('#SubBrands option').filter(`option[value="Sub${branch}Hide"]`).hide()
    }
    
    $("#SubBrands").val([]);
  });

});

.hide {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  Which Brand:
  <select id="Brand">
    <option></option>
    <option value="Brand1">Brand1</option>
    <option value="Brand2">Brand2</option>
    <option value="Brand3">Brand3</option>
    <option value="Brand4">Brand4</option>
  </select>
  </br>
  Parameter
  <select id="Parameter">
    <option></option>
    <option value="ShowBrands">Show Sub-Brands</option>
    <option value="HideBrands">Hide Sub-Brands</option>
  </select>
  </br>
  <div id="SubBrandBox" style="display: none;">
    Sub-Brands
    <select id="SubBrands">
      <option></option>
      <option value="SubBrand1Hide">AAAA</option>
      <option value="SubBrand2Hide">BBBB</option>
      <option value="SubBrand3Hide">CCCC</option>
      <option value="SubBrand4Hide">DDDD</option>
    </select>
  </div>
</body>

Answer 2

我想你最好有一个过滤器按钮或其他东西。我会说一个隐藏或显示按钮。保留一个跟踪一切的对象或东西。

你的第二个 <select> 应该是一个动作 select。这需要更新或显示当前的真实来源。请参阅以下示例：

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Choose a brand:
<select id="brand">
  <option value="" disabled selected></option>
  <option value="brand-A">Brand A</option>
  <option value="brand-B">Brand B</option>
  <option value="brand-C">Brand C</option>
</select>
<br />
Show or Hide:
<select id="show" disabled="disabled">
  <option value="" disabled selected></option>
  <option value="show">Show</option>
  <option value="hide">Hide</option>
</select>

这里我们现在有一个带有迷你配置的连接组件。现在基于此更改 - 我们需要显示或隐藏产品：

var config = {
  "brand-A": "show",
  "brand-B": "hide",
  "brand-C": "hide"
};

现在进入表演环节，我们这样写：

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
    // Hide all the products:
    $("#products option").not(":first").prop("hidden", true);
    $("#products option.brand-A").prop("hidden", config["brand-A"] === "hide");
    $("#products option.brand-B").prop("hidden", config["brand-B"] === "hide");
    $("#products option.brand-C").prop("hidden", config["brand-C"] === "hide");
  });
});

这为我们提供了您所需要的：

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
    // Hide all the products:
    $("#products option").not(":first").prop("hidden", true);
    $("#products option.brand-A").prop("hidden", config["brand-A"] === "hide");
    $("#products option.brand-B").prop("hidden", config["brand-B"] === "hide");
    $("#products option.brand-C").prop("hidden", config["brand-C"] === "hide");
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Choose a brand:
<select id="brand">
  <option value="" disabled selected></option>
  <option value="brand-A">Brand A</option>
  <option value="brand-B">Brand B</option>
  <option value="brand-C">Brand C</option>
</select>
<br />
Show or Hide:
<select id="show" disabled="disabled">
  <option value="" disabled selected></option>
  <option value="show">Show</option>
  <option value="hide">Hide</option>
</select>
<br />
List of Products:
<select id="products">
  <option value="" disabled selected></option>
  <option hidden="hidden" class="brand-A" value="product-A-1">Product A-1</option>
  <option hidden="hidden" class="brand-A" value="product-A-2">Product A-2</option>
  <option hidden="hidden" class="brand-A" value="product-A-3">Product A-3</option>
  <option hidden="hidden" class="brand-B" value="product-B-1">Product B-1</option>
  <option hidden="hidden" class="brand-B" value="product-B-2">Product B-2</option>
  <option hidden="hidden" class="brand-B" value="product-B-3">Product B-3</option>
  <option hidden="hidden" class="brand-C" value="product-C-1">Product C-1</option>
  <option hidden="hidden" class="brand-C" value="product-C-2">Product C-2</option>
  <option hidden="hidden" class="brand-C" value="product-C-3">Product C-3</option>
</select>
<p hidden="hidden">You have selected <strong></strong></p>

您还可以使用 Object.keys 替换以下内容，以更好的方式进行此操作：

$("#products option.brand-A").prop("hidden", config["brand-A"] === "hide");
$("#products option.brand-B").prop("hidden", config["brand-B"] === "hide");
$("#products option.brand-C").prop("hidden", config["brand-C"] === "hide");

有了这个：

Object.keys(config).forEach(function (br) {
  $("#products option." + br).prop("hidden", config[br] === "hide");
});

这是您的最终片段：

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
    // Hide all the products:
    $("#products option").not(":first").prop("hidden", true);
    Object.keys(config).forEach(function (br) {
      $("#products option." + br).prop("hidden", config[br] === "hide");
    });
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Choose a brand:
<select id="brand">
  <option value="" disabled selected></option>
  <option value="brand-A">Brand A</option>
  <option value="brand-B">Brand B</option>
  <option value="brand-C">Brand C</option>
</select>
<br />
Show or Hide:
<select id="show" disabled="disabled">
  <option value="" disabled selected></option>
  <option value="show">Show</option>
  <option value="hide">Hide</option>
</select>
<br />
List of Products:
<select id="products">
  <option value="" disabled selected></option>
  <option hidden="hidden" class="brand-A" value="product-A-1">Product A-1</option>
  <option hidden="hidden" class="brand-A" value="product-A-2">Product A-2</option>
  <option hidden="hidden" class="brand-A" value="product-A-3">Product A-3</option>
  <option hidden="hidden" class="brand-B" value="product-B-1">Product B-1</option>
  <option hidden="hidden" class="brand-B" value="product-B-2">Product B-2</option>
  <option hidden="hidden" class="brand-B" value="product-B-3">Product B-3</option>
  <option hidden="hidden" class="brand-C" value="product-C-1">Product C-1</option>
  <option hidden="hidden" class="brand-C" value="product-C-2">Product C-2</option>
  <option hidden="hidden" class="brand-C" value="product-C-3">Product C-3</option>
</select>
<p hidden="hidden">You have selected <strong></strong></p>

另一种表示：

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
    // Hide all the products:
    $("#products option").not(":first").prop("hidden", true);
    Object.keys(config).forEach(function (br) {
      $("#products option." + br).prop("hidden", config[br] === "hide");
    });
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Choose a brand:
<select id="brand">
  <option value="" disabled selected></option>
  <option value="brand-A">Brand A</option>
  <option value="brand-B">Brand B</option>
  <option value="brand-C">Brand C</option>
</select>
<br />
Show or Hide:
<select id="show" disabled="disabled">
  <option value="" disabled selected></option>
  <option value="show">Show</option>
  <option value="hide">Hide</option>
</select>
<br />
List of Products:
<select id="products" size="10" style="width: 100px;">
  <option value="" disabled selected></option>
  <option hidden="hidden" class="brand-A" value="product-A-1">Product A-1</option>
  <option hidden="hidden" class="brand-A" value="product-A-2">Product A-2</option>
  <option hidden="hidden" class="brand-A" value="product-A-3">Product A-3</option>
  <option hidden="hidden" class="brand-B" value="product-B-1">Product B-1</option>
  <option hidden="hidden" class="brand-B" value="product-B-2">Product B-2</option>
  <option hidden="hidden" class="brand-B" value="product-B-3">Product B-3</option>
  <option hidden="hidden" class="brand-C" value="product-C-1">Product C-1</option>
  <option hidden="hidden" class="brand-C" value="product-C-2">Product C-2</option>
  <option hidden="hidden" class="brand-C" value="product-C-3">Product C-3</option>
</select>
<p hidden="hidden">You have selected <strong></strong></p>

希望这对您有所帮助。

如何 Refresh/reload Select 下拉选项

How to Refresh/reload Select dropdown options

jquery

select

drop-down-menu