如果第一個未選中，則禁用第二個下拉列表

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

如果可以使用屬性 「名」，我的建議是：

$(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結構真實存在。如果這樣的結構始終是相同的，則可以選擇第一選擇：

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

更改事件綁定

然後在加載函數中添加這個來禁用第二個sele CT在加載時：

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