Question

我正在尝试使用if else语句将“selected”添加到选择菜单中的选项。我唯一的问题是，我不确定为什么一旦我回到价值“顶部”选项[1]仍然“被选中”。这就像第一个如果没有执行条件，虽然我看到我是否做控制台日志它确实改为第一个如果......

$html2pdf = new \Spipu\Html2Pdf\Html2Pdf('P', 'A4', 'en');
$html2pdf->writeHTML('<h1>HelloWorld</h1>This is my first test');
$html2pdf->output();

我在selectDesign on change

上调用selectOption函数

Answer 1

您需要访问select元素的正确值，例如

element.options[element.selectedIndex].value

并使用

document.getElementById('selectmenu').selectedIndex = 1;

用于设置选项的索引。

function selectOption(element) {
    if (element.options[element.selectedIndex].value == 'top') {
        document.getElementById('selectmenu').selectedIndex = 1;
    } else if (element.options[element.selectedIndex].value == 'jeans') {
        document.getElementById('selectmenu').selectedIndex = 3;
    }
}

<select id="selectdesign" onchange="selectOption(this);">
    <option value="0"></option>
    <option value="top">top</option>
    <option value="jeans">jeans</option>
</select>
<select id="selectmenu">
    <option value="0"></option>
    <option value="1">top-blue</option>
    <option value="2">top-pink</option>
    <option value="3">bottoms-red</option>
    <option value="4">bottoms-violet</option>
</select>

带有预选选项对象的版本。

function selectOption(element) {
    var indices = {
            top: 1,
            jeans: 3,
        },
        value = element.options[element.selectedIndex].value

    if (value in indices) {
        document.getElementById('selectmenu').selectedIndex = indices[value];
    }
}

<select id="selectdesign" onchange="selectOption(this);">
    <option value="0"></option>
    <option value="top">top</option>
    <option value="jeans">jeans</option>
</select>
<select id="selectmenu">
    <option value="0"></option>
    <option value="1">top-blue</option>
    <option value="2">top-pink</option>
    <option value="3">bottoms-red</option>
    <option value="4">bottoms-violet</option>
</select>

如果else语句，选项的“selected”属性不会重置

1 个答案: