使用下拉列表运行的 Javascript 函数

Question

我有一个下拉列表，我想在选择某些内容时将参数(颜色)传递给函数。我过去用过一点 Javascript，但我不太确定如何做到这一点。我在外部文件中运行了 javascript。最终我希望下拉菜单更改为菜单中选择的颜色。预先感谢您的帮助。

HTML代码

 <div id="Color_drop_menu">

 <form>
 <select id=Color1 onchange="Color1Change()">
    <option> </option>
    <option> "Black" </option>
    <option> "Brown" </option>
    <option> "Red" </option>
    <option> "Orange" </option>
    <option> "Yellow" </option>
    <option> "Green" </option>
    <option> "Blue" </option>
    <option> "Violet"</option>
    <option> "Grey" </option>
    <option> "White" </option>
    <option> "Gold" </option>
    <option> "Silver" </option>
</select>
</form>

</div>

Javascript 代码

function Color1Change(){
      console.log("Hello World"); //this prints Hello World
}

Answer 1

试试这个:

function Color1Change(x) {
    var color = x.options[x.selectedIndex].innerHTML.replace(/\"/g, '');
    document.getElementById('Color_drop_menu').style.backgroundColor = color;
}

并将您的选择元素更改为:<select id=Color1 onchange="Color1Change(this)">

jsFiddle example