更新下拉选项值和脚本 onchange 而不是 onclick

Question

我只是想取消以下脚本中的 'Result' 按钮。我很高兴在页面加载时选择第一个下拉选项，并且脚本已经有运行基于此输出：

var dd1 = document.getElementById("dropdown");
var dd2 = document.getElementById("dropdown2");
var res = document.getElementById("result");
var output = document.getElementById("output");

function getSpecificText(v1, v2) {
    var con = v1.toString() + v2.toString();
    var res = "";
    switch (con) {
      case "500012":
        res = text1 ";
                break;
            case "
        500024 ":
                res = "
        text2 ";
                break;
            case "
        500036 ":
                res = "
        text3 ";
                break;
            case "
        500048 ":
                res = "
        text4 ";
                break;
            case "
        500060 ":
                res = "
        text1 ";
                break;
            case "
        1000012 ":
                res = "
        text2 ";
                break;
            case "
        1000024 ":
                res = "
        text3 ";
                break;
            case "
        1000036 ":
                res = "
        text4 ";
                break;
            case "
        1000048 ":
                res = "
        text1 ";
                break;
            case "
        1000060 ":
                res = "
        text2 ";
                break;
            case "
        1500012 ":
                res = "
        text3 ";
                break;
            case "
        1500024 ":
                res = "
        text4 ";
                break;
            case "
        1500036 ":
                res = "
        text1 ";
                break;
            case "
        1500048 ":
                res = "
        text2 ";
                break;
            case "
        1500060 ":
                res = "
        text3 ";
                break;
            case "
        2000012 ":
                res = "
        text3 ";
                break;
            case "
        2000024 ":
                res = "
        text4 ";
                break;
            case "
        2000036 ":
                res = "
        text1 ";
                break;
            case "
        2000048 ":
                res = "
        text2 ";
                break;
            case "
        2000060 ":
                res = "
        text3 ";
                break;
            case "
        2500012 ":
                res = "
        text3 ";
                break;
            case "
        2500024 ":
                res = "
        text4 ";
                break;
            case "
        2500036 ":
                res = "
        text1 ";
                break;
            case "
        2500048 ":
                res = "
        text2 ";
                break;
            case "
        2500060 ":
                res = "
        text3 ";
                break;
            // ...
        }
        return res
    }
    
    function getSelected() {
        var v1 = dd1.options[dd1.selectedIndex].value;
        var v2 = dd2.options[dd2.selectedIndex].value;
        output.innerHTML = getSpecificText(v1, v2);
    }
    
    res.addEventListener("
        click ", getSelected);

<p>
  Value:
  <select name="dropdown" id="dropdown">
    <option value="5000">5000</option>
    <option value="10000">10000</option>
    <option value="15000">15000</option>
    <option value="20000">20000</option>
    <option value="25000">25000</option>
  </select>
  Months:
  <select name="dropdown2" id="dropdown2">
    <option value="12">12</option>
    <option value="24">24</option>
    <option value="36">36</option>
    <option value="48">48</option>
    <option value="60">60</option>
  </select>
  Months
  <button id="result">Result</button>
  <div id="output"></div>
</p>

Answer 1

我认为您只想在下拉列表元素上使用 onchange 事件。像这样：

dd1.addEventListener("change", getSelected);
dd2.addEventListener("change", getSelected);

Here is a working example

如果您想在首次加载页面时显示输出，只需在 javascript:

中直接调用 getSelected 函数

getSelected();

由于此函数依赖于 DOM 个元素，您需要确保它们已加载。这可以通过将脚本标记放在文档末尾或使用 window.onload 事件来完成，如下所示：

window.onload = function(){
    getSelected();
};

更新下拉选项值和脚本 onchange 而不是 onclick

Update dropdown option value and script onchange rather than onclick

javascript

html-select