JQuery 设置选择的选项
JQuery Set selected option
我有两个选择框,默认值为 - 我想为两者选择其他内容,我的第一个问题是两个字段都有动态 ID,例如 prod-685209-Size
,所以我无法使用 ID 进行访问.
我有以下 HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
所以我执行了以下操作:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
它在前端工作,显示了我的新选项,但它没有提示后端,因为它实际上并没有选择选项。当我手动单击这些选项时,后端工作正常,基本上我需要另一种解决方案来选择这些选项。
如果我没有误解你的要求,那么你需要这样的东西。只需将两个不同的 ids 添加到您的 select
元素并附加一个 change
事件侦听器。例如 size 和 color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
您需要在 dom 命令后添加 .validate() 以实际提示页面。
我有两个选择框,默认值为 - 我想为两者选择其他内容,我的第一个问题是两个字段都有动态 ID,例如 prod-685209-Size
,所以我无法使用 ID 进行访问.
我有以下 HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
所以我执行了以下操作:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
它在前端工作,显示了我的新选项,但它没有提示后端,因为它实际上并没有选择选项。当我手动单击这些选项时,后端工作正常,基本上我需要另一种解决方案来选择这些选项。
如果我没有误解你的要求,那么你需要这样的东西。只需将两个不同的 ids 添加到您的 select
元素并附加一个 change
事件侦听器。例如 size 和 color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
您需要在 dom 命令后添加 .validate() 以实际提示页面。