javascript - 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 示例

Answer 2

试试这个：

HTML：

<select id=Color1 onchange="Color1Change(this)">

Javascript：

<script>
   function Color1Change(option){
      console.log(option.value); //this prints the text of your options if no value attribute is set.
}
</script>