Question

我有3个下拉菜单，共同确定消费者购买的产品组合。第二个下拉列表的内容取决于第一个下拉列表的选择。我可以通过以下方式轻松解决这个问题：

document.getElementById("select").options[10].style.display = 'none';

然而，我发现safari不支持选项的样式。这让我到现在为止，使用.append（）和.remove（），但是这些并没有像我预期的那样工作。在第一个下拉列表中的选项之间来回切换时，第二个下拉列表中的选项似乎重复。以下是我到目前为止的情况：

HTML

<select class="validation" id="7b478bce31a8953385d05cdf3c1f5a1f" name="attribute[217]">
  <option value="" selected="selected"> -- Please Choose an Option -- </option>
  <option value="269">Junior</option>
  <option value="270">Aero</option>
  <option value="271">Max</option>
</select>


<select class="validation" id="9c995f36eab2fc80110590a6ad5a15f5" name="attribute[218]">
  <option value="" selected="selected"> -- Please Choose an Option -- </option>
  <option value="167">Snow White</option>
  <option value="158">Charcoal Black</option>
  <option value="160">Electric Blue</option>
  <option value="161">Royal Blue</option>
  <option value="162">Hot Pink</option>
  <option value="163">Spring Green</option>
  <option value="164">Purple Punch</option>
  <option value="165">Sunny Yellow</option>
  <option value="166">Tangerine Orange</option>
  <option value="168">Forest Green</option>
  <option value="159">Intense Red</option>
</select>


<select class="validation" id="573f771b426f35d14337138d17deda3a" name="attribute[219]">
  <option value=""> -- Please Choose an Option -- </option>
  <option value="268" selected="selected">Cinnamint</option>
</select>

JAVASCRIPT

$(document).ready(function() {
  document.getElementById('9c995f36eab2fc80110590a6ad5a15f5').selectedIndex = 0;
  document.getElementById('7b478bce31a8953385d05cdf3c1f5a1f').selectedIndex = 0;
  bufferForSelections = new Array();
  $('#7b478bce31a8953385d05cdf3c1f5a1f').change(function() {
    var value = $(this).val();
    if (value == "269") {
      $("#9c995f36eab2fc80110590a6ad5a15f5 option[value='168']").remove();
      document.getElementById('9c995f36eab2fc80110590a6ad5a15f5').selectedIndex = 0;
      $('#7b478bce31a8953385d05cdf3c1f5a1f').change(function() {
        $('#9c995f36eab2fc80110590a6ad5a15f5').append('<option value="168">Forest Green</option>');
      });
    } else {
      if (value == "271") {
        $("#9c995f36eab2fc80110590a6ad5a15f5 option[value='168']").remove();
        $("#9c995f36eab2fc80110590a6ad5a15f5 option[value='166']").remove();
        $("#9c995f36eab2fc80110590a6ad5a15f5 option[value='165']").remove();
        $("#9c995f36eab2fc80110590a6ad5a15f5 option[value='163']").remove();
        $("#9c995f36eab2fc80110590a6ad5a15f5 option[value='161']").remove();
        $('#7b478bce31a8953385d05cdf3c1f5a1f').change(function() {
          $('#9c995f36eab2fc80110590a6ad5a15f5').append('<option value="168">Forest Green</option>');
          $('#9c995f36eab2fc80110590a6ad5a15f5').append('<option value="166">Tangerine Orange</option>');
          $('#9c995f36eab2fc80110590a6ad5a15f5').append('<option value="165">Sunny Yellow</option>');
          $('#9c995f36eab2fc80110590a6ad5a15f5').append('<option value="163">Spring Green</option>');
          $('#9c995f36eab2fc80110590a6ad5a15f5').append('<option value="161">Royal Blue</option>');
        });
        document.getElementById('9c995f36eab2fc80110590a6ad5a15f5').selectedIndex = 0;
      } else {}
    }
  });
});

http://jsfiddle.net/ahaponek_sisu/e5m0sLmt/

这就是实施的地方：https://www.sisuguard.com/sisu-bundle/

我无法更改HTML。我正在尝试解决生成HTML的BigCommerce中的限制。还有另一种方法我应该攻击这个吗？

第二次下拉选项由第一次下拉确定

0 个答案: