Javascript函数使用下拉列表运行答案

【问题标题】：Javascript function run with drop down listJavascript函数使用下拉列表运行
【发布时间】：2013-03-21 19:51:56
【问题描述】：

我有一个下拉列表，我想在选择某些内容时将参数（颜色）传递给函数。我过去使用过一点 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
}

【问题讨论】：

你应该给你的选项标签一个“值”，如 ... 这允许你从下面的答案中获得“值”当然。

标签： javascript html drop-down-menu menu argument-passing

【解决方案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

【讨论】：

谢谢，效果很好！！有没有办法将实际的下拉菜单更改为蓝色/红色...而不是背景？
好的，只需将函数中的第二行更改为document.getElementById('Color1').style.backgroundColor = color;即可。 jsfiddle.net/j08691/UmexV/1

【解决方案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>

【讨论】：