使用下拉列表运行Javascript函数

我有一个下拉列表，我希望在选择某项时将参数（颜色）传递给函数。我过去曾经使用Javascript，但我不完全确定如何做到这一点。我有在外部文件中运行的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 
}

来源

2013-03-21 ben

你应该给你的选项标签是 “价值”在 ...这可以让你获得t他肯定从下面的答案中“值”。 – Ryan 2013-03-21 19:59:26

试试这个：

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

来源

2013-03-21 19:57:36 j08691

谢谢，这是伟大的工作！有没有办法改变实际的下拉菜单，以便它是蓝色/红色而不是背景？ – ben 2013-03-21 20:04:48

当然，只需将函数中的第二行更改为'document.getElementById（'Color1'）。style.backgroundColor = color;'。 http://jsfiddle.net/j08691/UmexV/1/ – j08691 2013-03-21 20:05:47

你刚刚度过了我的一天！ – ben 2013-03-21 20:11:09

试试这个：

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>

来源

2013-03-21 19:56:19 AlexCheuk

使用下拉列表运行Javascript函数

回答

相关问题