如何解决纯 javascript 中 .combine 的替代方案
我有一个使用纯 javascript 和 jQuery 组合的下拉菜单代码。它工作正常，但我必须为 ESP32 微控制器构建一个 Web 界面，为了节省 ESP32 的有限资源，我想放弃 jQuery 依赖。
是否可以只使用纯 JavaScript？
我的代码如下：
<html>
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dropdown menu</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<form action="">
<SELECT class="combine" id ="command" name = "a">
<option></option>
<option>SELECT</option>
<option>Digital Write</option>
<option>Analog Write</option>
<option>Digital Read</option>
<option>Analog Read</option>
<option>Neopixel</option>
<option>Set AP Channel</option>
<option>Set Sleep Time</option>
<option>Set Mode</option>
</SELECT>
<SELECT class="combine" id ="device" name = "b">
<option></option>
<option>Livingroom</option>
<option>Kitchen</option>
<option>bedroom1</option>
<option>bedroom2</option>
<option>Bathroom1</option>
<option>Bathroom2</option>
<option>Laundry</option>
<option>Office</option>
</SELECT>
<SELECT class="combine" id ="command1" name = "c" >
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>26</option>
<option>36</option>
<option>46</option>
<option>56</option>
<option>66</option>
<option>76</option>
<option>86</option>
<option>96</option>
<option>106</option>
<option>116</option>
<option>126</option>
<option>136</option>
<option>146</option>
<option>156</option>
<option>166</option>
<option>176</option>
<option>186</option>
<option>196</option>
<option>206</option>
<option>216</option>
<option>226</option>
<option>236</option>
<option>246</option>
<option>256</option>
</SELECT>
<SELECT class="combine" id ="command2" name = "d">
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>26</option>
<option>36</option>
<option>46</option>
<option>56</option>
<option>66</option>
<option>76</option>
<option>86</option>
<option>96</option>
<option>106</option>
<option>116</option>
<option>126</option>
<option>136</option>
<option>146</option>
<option>156</option>
<option>166</option>
<option>176</option>
<option>186</option>
<option>196</option>
<option>206</option>
<option>216</option>
<option>226</option>
<option>236</option>
<option>246</option>
<option>256</option>
</SELECT>
<SELECT class="combine" id ="command3" name = "e">
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>26</option>
<option>36</option>
<option>46</option>
<option>56</option>
<option>66</option>
<option>76</option>
<option>86</option>
<option>96</option>
<option>106</option>
<option>116</option>
<option>126</option>
<option>136</option>
<option>146</option>
<option>156</option>
<option>166</option>
<option>176</option>
<option>186</option>
<option>196</option>
<option>206</option>
<option>216</option>
<option>226</option>
<option>236</option>
<option>246</option>
<option>256</option>
</SELECT>
<SELECT class="combine" id ="command4" name = "f" >
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>26</option>
<option>36</option>
<option>46</option>
<option>56</option>
<option>66</option>
<option>76</option>
<option>86</option>
<option>96</option>
<option>106</option>
<option>116</option>
<option>126</option>
<option>136</option>
<option>146</option>
<option>156</option>
<option>166</option>
<option>176</option>
<option>186</option>
<option>196</option>
<option>206</option>
<option>216</option>
<option>226</option>
<option>236</option>
<option>246</option>
<option>256</option>
</SELECT>
<SELECT class="combine" id ="column" name = "g">
<option>*</option>
<option>Location</option>
<option>Date</option>
<option>Day</option>
<option>Time</option>
<option>Hour</option>
</SELECT>
<SELECT class="combine" id ="field" name = "h">
<option>Location</option>
<option>Date</option>
<option>Day</option>
<option>Time</option>
<option>Hour</option>
</SELECT>
<SELECT class="combine" id ="operator" name = "i">
<option>=</option>
<option>!=</option>
<option>></option>
<option><</option>
<option><=</option>
<option>>=</option>
<option><></option>
</SELECT>
<br>
<script>
var attachEvent = function(node,event,listener,useCapture) {
// Method for FF,Opera,Chrome,Safari
if ( window.addEventListener ) {
node.addEventListener(event,useCapture || false);
}
// IE has its own method
else {
node.attachEvent('on'+event,listener);
}
};
// Once the window loads and the DOM is ready,attach the event to the main
attachEvent(window,"load",function() {
var select_command = document.getElementById("command");
var selectHandler = function() {
option1 = document.getElementById("device"),option2 = document.getElementById("command1");
option3 = document.getElementById("command2");
option4 = document.getElementById("command3");
option5 = document.getElementById("command4");
option6 = document.getElementById("column");
option7 = document.getElementById("field");
option8 = document.getElementById("operator");
// Show and hide the appropriate select's
if (this.value == "Neopixel") {
option1.style.display = "";
option2.style.display = "";
option3.style.display = "";
option4.style.display = "";
option5.style.display = "";
option6.style.display = "none";
option7.style.display = "none";
option8.style.display = "none";
} else if (this.value == "Set AP Channel" || this.value == "Set Sleep Time" || this.value == "Set Mode" || this.value == "Digital Read" || this.value == "Analog Read") {
option1.style.display = "";
option2.style.display = "";
option3.style.display = "none";
option4.style.display = "none";
option5.style.display = "none";
option6.style.display = "none";
option7.style.display = "none";
option8.style.display = "none";
} else if (this.value == "Digital Write" || this.value == "Analog Write" || this.value == "SELECT") {
option1.style.display = "";
option2.style.display = "";
option3.style.display = "";
option4.style.display = "none";
option5.style.display = "none";
option6.style.display = "none";
option7.style.display = "none";
option8.style.display = "none";
if (this.value == "SELECT") {
option1.style.display = "none";
option2.style.display = "none";
option3.style.display = "none";
option4.style.display = "none";
option5.style.display = "none";
option6.style.display = "";
option7.style.display = "";
option8.style.display = "";
}
}
};
// Use the onchange and onkeypress events to detect when the
// value of select_command has changed
attachEvent(select_command,"change",selectHandler);
attachEvent(select_command,"keypress",selectHandler);
});
$(document).ready(function(){
$("form").submit(function(){
var sentCommand = document.getElementById('result').value;
ws.send(sentCommand);
});
});
$(document).ready(function(){
$('.combine').on('change',function(){
if ($('#command').val() == "Set AP Channel" || "Set Sleep Time" || "Set Mode" || "Digital Read" || "Analog Read")
{
var payload = $('#command').val() + '/' + $('#device').val() + '/' + $('#command1').val();
}
if ($('#command').val() == "Digital Write")
{
var payload = $('#command').val() + '/' + $('#device').val() + '/' + $('#command1').val() + "/" + $('#command2').val();
}
if ($('#command').val() == "SELECT")
{
var payload = $('#command').val() + " " + $('#column').val() + " FROM test1 WHERE " + $('#field').val() + " " + $('#operator').val() + " 'Enter your choice'";
}
$('#result').val(payload);
});
})
</script>
<br>
<input type="text" id="result" size = "52" name="send" value="" />
<input type="submit" value="Send Command">
</form>
<textarea rows="4" cols="35" id="display" value="" spellcheck="false" readonly="true" style="font-size:16px;line-height: 1em;">
</textarea>
</body>
</html>
谢谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
