javascript - Comparator A && B 从 select tag 中产生 C

Question

如果从下拉菜单中选择“陈述 A”和“陈述 B”，我如何比较两者，以便我可以在其他地方产生“C”结果

就像说的那样，如果选择了 A && B，则将 DOM ""更改为 C。

代码如下

  <select id="imgList">
    <option value="images/a.png" data-description="a">a</option>
    <option value="images/b.png" data-description="b">b</option>
    <option value="images/c.png" data-description="c">c</option>
    <option value="images/d.png" data-description="d">d</option>
  </select>

  <select id="imgList2">
    <option value="images/a.png" data-description="a">a</option>
    <option value="images/b.png" data-description="b">b</option>
    <option value="images/c.png" data-description="c">c</option>
    <option value="images/d.png" data-description="d">d</option>
  </select>

和

if (document.getElementById('imgList').value == 'images/a.png'&&
    document.getElementById('imgList2').value == 'images/b.png') {
    console.log("you got C");}

Answer 1

您可以像这样使用 onchange 事件处理程序:

 <select id="imgList" onchange="compare()">
    <option value="images/a.png" data-description="a">a</option>
    <option value="images/b.png" data-description="b">b</option>
    <option value="images/c.png" data-description="c">c</option>
    <option value="images/d.png" data-description="d">d</option>
  </select>

  <select id="imgList2" onchange="compare()">
    <option value="images/a.png" data-description="a">a</option>
    <option value="images/b.png" data-description="b">b</option>
    <option value="images/c.png" data-description="c">c</option>
    <option value="images/d.png" data-description="d">d</option>
  </select>

function compare()
{
    if (document.getElementById('imgList').value == 'images/a.png'&& document.getElementById('imgList2').value == 'images/b.png') {
        console.log("you got C");
    }
}

此处的文档:https://www.w3schools.com/jsref/event_onchange.asp