Javascript在更改选项时更改颜色

我带着另一个回来了

目前，我的页面上有按钮可以改变Philip的色调灯光的颜色，但我希望它是一个下拉列表，随着我改变选项而改变

以下是当前按钮的外观：

<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>

这就是我想弄明白的

<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>

灯光1
红色
橙色
绿色
蓝色
粉红色
淡的
功能切换（sel）{
如果（sel.value==“”）返回；
sel.value=“”；
};

如果我运行该脚本，LightbullOne将变为红色，但只会变为红色，因为它只能回忆起红色。因此，如果我选择选项2，我不知道如何告诉HTML一旦更改就获得colororange。希望这是有道理的

nnnnn在数据切换方面帮了我很多忙。没有代码，但我不确定这是否适用于这里，也不确定如何更改它。有什么想法吗

编辑：

灯光1
红色
橙色
绿色
蓝色
粉红色
淡的
var colorred=“{”on\”：true，\'bri\”：255，\'hue\：15331，\'sat\：121，\'xy\：[0.1721,0.0500]，\'ct\：343}
功能lightcolor（灯光、颜色）{
执行（'PUT'，'http://'+bridge+'/api/'+hash+'/lights/'+light+'/state'，color）；
}
函数执行（$method、$url、$message）{
xmlhttp=新的XMLHttpRequest（）；
open（$method，$url，true）
发送（$message）；
}

---

这就是我现在的处境。我觉得我可能已经接近了？

许多语法问题。使用浏览器控制台查看错误。这很容易做到。示例：

colorred

和

colorrange

不应在对象周围加引号或在对象内部加反斜杠。

值前面缺少一个点。使用控制台将帮助函数jumpChange（sel）{if（sel.value==“”）返回；//如果用户选择第一个选项var color=+sel.options[sel.selectedIndex].getAttribute（“数据开关编号”，“颜色”）灯开关（颜色，sel.value=='on'）；sel.value=“”则不执行任何操作；//重置选择以显示“灯光功能”选项var colorred=“{\”on\”：真、\'hue\'：13122、\'sat\'：211、\'xy\'：[0.5119,0.4147]、\'ct\'：467、\'transitiontime\'：100”；）这就是我的目的…--请在jsfiddle.net中使用您的代码和html创建一个简单的演示。您没有听过关于删除对象周围的引号的内容。对象看起来像：
var colorred={“on”：true，“hue”：13122，…}
就可以了，我也会告诉你为什么我对此感到困惑。这是我的另一个js文件，虽然它与第一个按钮通信。让我看看这个，如果我有任何其他解决方案，我会在这方面帮助你。
<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>

<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>