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元素更改为：<select id=Color1 onchange="Color1Change(this)">

<强> jsFiddle example

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>

Javascript函数与下拉列表一起运行

2 个答案: