如果未选择第一个下拉菜单,我想禁用第二个下拉菜单,有什么方法可以用 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>
生成 super 属性的 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>
最佳答案
如果可以使用“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 和属性“name”,一个可能的解决方案可能是,例如,基于 HTML 结构。如果这样的结构总是一样的,可以选择第一个select:
$('div div div select').eq(0)
对于第二次选择:
$('div div div select').eq(1)
另一种替代方法是应用 jQuery filter选择具有包含数字的特殊属性的元素 ...
关于javascript - 如果未选择第一个,则禁用第二个下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37104635/