如果未选择第一个下拉列表,我想禁用第二个下拉列表,有什么方法可以使用 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 和属性“名称”,则可能的解决方案可能是基于 HTML 结构。如果这样的结构始终相同,则可以选择第一个选择:
$('div div div select').eq(0)
对于第二个选择:
$('div div div select').eq(1)
另一种替代方法是应用jQuery 过滤器 http://api.jquery.com/filter/选择具有包含数字的特殊属性的元素...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)