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

如果您可以使用属性＆＃34; name＆＃34;，我的建议是：

＆＃13;

$(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();
    }
  });
});

＆＃13;

<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>

＆＃13;

如果你不能使用ID和属性＆＃34; name＆＃34;例如，可能的解决方案可能基于HTML结构。如果这样的结构总是相同的，您可以选择第一个选择：

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

对于第二个选择：

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

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

Answer 2

您可以使用jquery绑定更改事件，如此

$('#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);

如果未选择第一个下拉，则禁用第二个下拉列表

3 个答案: