Javascript to change colors onChange options

问题

I'm back with another one -_-.

currently my page has buttons to change the color of my Philip's hue lights -- but I want it to be a dropdown that will change as I change the option.

Here's what the current buttons look like:

<button class="lightbuttontall" onclick="lightcolor(1,colorred);">Light 1 red</button>
<button class="lightbuttontall" onclick="lightcolor(2,colorred);">Light 2 red</button>
<button class="lightbuttontall" onclick="lightcolor(3,colorred);">Light 3 red</button>
</p>
<p class="lightbuttonline">
    <button class="lightbuttontall" onclick="lightcolor(1,colororange);">Light 1 orange</button>
    <button class="lightbuttontall" onclick="lightcolor(2,colororange);">Light 2 orange</button>
    <button class="lightbuttontall" onclick="lightcolor(3,colororange);">Light 3 orange</button>

Then, in a separate js file I have this:

var colorred= "{\"on\":true,\"bri\":255,\"hue\":836,\"sat\":237,\"xy\":[0.6472,0.3316],\"ct\":500}"
var colororange="{\"on\":true,\"bri\":254,\"hue\":13390,\"sat\":251,\"xy\":[0.5663,0.3978],\"ct\":500}"

And this is what I'm trying to figure out.

<select name="jumpmenu" onChange="lightcolor(1,colorred);">
<option value="">Light 1</option>
<option value="1";>Red</option>
<option value="2";>Orange</option>
<option value="3";>Green</option>
<option value="4";>Blue</option>
<option value="5";>Pink</option>
<option value="6";>Pastel</option>
</select>
<script language="javascript">
function jumpChange(sel) {
    if (sel.value === "") return; 


sel.value = ""; 


};
</script>

If I run that script, lightbulb one will change to red, but only red because that's the only one it can recall. So I don't know how to tell the HTML to onChange go get colororange if I select option 2. Hope that makes sense.

nnnnn helped me a lot with doing the data-switchNo code but I'm not sure if that will apply here or how to change it so it does. Any ideas?

EDIT:

<select name="jumpmenu" onChange="lightcolor(this);">
<option value="">Light 1</option>
<option value="colorred";>Red</option>
<option value="2";>Orange</option>
<option value="3";>Green</option>
<option value="4";>Blue</option>
<option value="5";>Pink</option>
<option value="6";>Pastel</option>
</select>
<script language="javascript">

 var colorred ="{\"on\":true,\"bri\":255,\"hue\":15331,\"sat\":121,\"xy\":[0.1721,0.0500],\"ct\":343}"
function lightcolor(light,color){
    execute('PUT', 'http://'+bridge+'/api/'+hash+'/lights/'+light+'/state', color);

}


function execute($method,$url,$message){
xmlhttp=new XMLHttpRequest();
xmlhttp.open($method,$url,true)
xmlhttp.send($message);
}
</script>

This is where I'm at now. i feel like I might be getting close?

来源：https://stackoverflow.com/questions/14793308/javascript-to-change-colors-onchange-options

标签

javascript

html

list

option

onchange