如果未选择第一个下拉菜单，则禁用第二个下拉菜单

Question

如果未选择第一个下拉菜单，我想禁用第二个下拉菜单，有没有办法使用 javascript 做到这一点？所以想法是：如果没有选择第一个下拉菜单，则必须禁用第二个下拉菜单。我只想说我不能在下拉列表中添加任何 ID 或任何类，所有类和 id 都是动态生成的，所以 html 代码将保持不变，我使用 Magento 平台。

HTML 结构：

<div id="product-options-wrapper" class="product-options">
    <div class="opts-container">
        <div class="counter">1</div>
            <label class="required"><em>*</em>First Option</label>
            <div class="input-box">
                <select id="attribute1211" class="required-entry super-attribute-select" name="super_attribute[1211]">
                    <option value="">Choose an Option...</option>
                    <option value="1747" price="0" data-label="vinyl matt">Vinyl Matt</option>
                    <option value="1748" price="0" data-label="vinyl silk">Vinyl Silk</option>
                    <option value="1749" price="0" data-label="vinyl soft sheen">Vinyl Soft Sheen</option>
                    <option value="1746" price="0" data-label="high gloss">High Gloss</option>
                    <option value="1745" price="0" data-label="eggshell">Eggshell</option>
                    <option value="1740" price="0" data-label="diamond eggshell">Diamond Eggshell</option>
                </select>
            </div>
    </div>
    <div class="opts-container">
        <div class="counter">2</div>
        <label class="required"><em>*</em>Size</label>
        <div class="input-box">
            <select id="attribute1219" class="required-entry super-attribute-select" name="super_attribute[1219]">
                <option value="">Choose an Option...</option>
                <option value="1718" price="0" data-label="5 litre">5 Litre</option>
                <option value="1719" price="0" data-label="2.5 litre">2.5 Litre</option>
                <option value="1714" price="0" data-label="1 litre">1 Litre</option>
            </select>
        </div>
    </div>
</div>

生成超属性的PHP代码：

  <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <?php
        $_rendered = false;
        foreach ($_renderers as $_rendererName):
            $_renderer = $this->getChild('attr_renderers')->getChild($_rendererName);
            if (method_exists($_renderer, 'shouldRender') && $_renderer->shouldRender($_attribute, $_jsonConfig)):
                $_renderer->setProduct($_product);
                $_renderer->setAttributeObj($_attribute);
                echo $_renderer->toHtml();
                $_rendered = true;
                break;
            endif;
        endforeach;

        if (!$_rendered):
        ?>
        <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
        <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
            <div class="input-box">
                <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                  </select>
              </div>
        </dd>
        <?php endif; ?>
    <?php endforeach; ?>
    </dl>

Answer 1

如果可以使用属性“name”，我的建议是：

$(function () {
  $('select[name="super_attribute[1219]"]').hide().parents().slice(0,2).hide()

  $('select[name="super_attribute[1211]"]').on('change', function (e) {
    if ($(this).find('option:selected').index() === 0) {
      $('select[name="super_attribute[1219]"]').hide().parents().slice(0,2).hide();
    } else {
      $('select[name="super_attribute[1219]"]').show().parents().slice(0,2).show();
    }
  });
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>


<div id="product-options-wrapper" class="product-options">
    <div class="opts-container">
        <div class="counter">1</div>
        <label class="required"><em>*</em>First Option</label>

        <div class="input-box">
            <select id="attribute1211" class="required-entry super-attribute-select" name="super_attribute[1211]">
                <option value="">Choose an Option...</option>
                <option value="1747" price="0" data-label="vinyl matt">Vinyl Matt</option>
                <option value="1748" price="0" data-label="vinyl silk">Vinyl Silk</option>
                <option value="1749" price="0" data-label="vinyl soft sheen">Vinyl Soft Sheen</option>
                <option value="1746" price="0" data-label="high gloss">High Gloss</option>
                <option value="1745" price="0" data-label="eggshell">Eggshell</option>
                <option value="1740" price="0" data-label="diamond eggshell">Diamond Eggshell</option>
            </select>
        </div>
    </div>
    <div class="opts-container">
        <div class="counter">2</div>
        <label class="required"><em>*</em>Size</label>

        <div class="input-box">
            <select id="attribute1219" class="required-entry super-attribute-select" name="super_attribute[1219]">
                <option value="">Choose an Option...</option>
                <option value="1718" price="0" data-label="5 litre">5 Litre</option>
                <option value="1719" price="0" data-label="2.5 litre">2.5 Litre</option>
                <option value="1714" price="0" data-label="1 litre">1 Litre</option>
            </select>
        </div>
    </div>
</div>

如果您不能使用 ID 和属性“名称”，则可能的解决方案可能是，例如，基于 HTML 结构。如果这样的结构总是一样的，可以选择第一个select：

$('div div div select').eq(0)

第二次选择：

$('div div div select').eq(1)

另一种替代方法是应用jQuery filter 来选择具有包含数字的特殊属性的元素...

Answer 2

你可以像这样使用 jquery 来绑定 change 事件

$('#attribute1211').change(function(e){
     $('#attribute1219').prop('disabled', !$(this).val());
});

并在加载功能上添加此以在加载时禁用第二次选择：

$(function(){
    $('#attribute1219').prop('disabled', true);
});

查看 JSFiddle https://jsfiddle.net/9gexw82r/

Answer 3

纯 JS 你可以做这样的事情

var s1 = document.getElementById("attribute1211"),
    s2 = document.getElementById("attribute1219");
s2.disabled = true;
s1.addEventListener("change", e => s2.disabled = s1.value === "" ? true : false, false);