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

Question

I am simply trying to do away with the 'Result' button in the following script. I am happy for the first dropdown options to be selected on page load, and the script to already have run based on this output:

 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

I think you just want to use the onchange event on the drop down list elements. Something like this:

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

Here is a working example

If you want to show the output when the page is first loaded just call the getSelected function directly in your javascript:

getSelected();

As this function relies on DOM elements, you will need to ensure they are loaded. This can be done either by putting the script tag at the end of the document, or by using a window.onload event, like so:

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