使用onChange事件创建NoScript兼容的Select Form元素

I wouldn't say that I'm addicted to checking Google Analytics but I do check my statistics often. I guess hoping for a huge burst of traffic from some unknown source. Anyway, I have multiple sites set up within my account. The way to switch between sites is by choosing the site from a dropdown list. Once the dropdown list changes, the page automatically reloads with the requested site content.

我不会说我沉迷于检查Google Analytics(分析)，但是我经常检查自己的统计信息。 我想希望从未知来源获得大量流量。 无论如何，我的帐户中设置了多个网站。 在站点之间进行切换的方法是从下拉列表中选择站点。 下拉列表更改后，页面会自动重新加载请求的网站内容。

While having the onChange event on a SELECT element is great and saves a click, it's important to note that the functionality breaks completely if the user doesn't have JavaScript enabled. In that case, it's important to show the submit button. Here's how to keep your bases covered.

尽管在SELECT元素上使用onChange事件非常棒，并且可以节省单击次数，但要注意的是，如果用户未启用JavaScript，则该功能会完全中断。 在这种情况下，显示提交按钮很重要。 这是保持基地安全的方法。

XHTML和JavaScript (The XHTML and JavaScript)

<form name="accounts_form" id="accounts_form" method="get" action="<?php echo $_SERVER['REQUEST_URI']; ?>"> <label for="color">Which account do you want to view?</label>     <select name="color" id="color" onchange="document.forms['accounts_form'].submit();"> <option value="">Select</option> <option value="Savings Account 1">Savings Account 1</option> <option value="Savings Account 2">Savings Account 2</option> <option value="Savings Account 3">Savings Account 3</option> <option value="Checking Account 1">Checking Account 1</option> <option value="Checking Account 2">Checking Account 2    </option> </select> <br /><br /> <input type="submit" value="Go!" id="sub" class="button" /> </form> <script type="text/javascript"> //Going to hide the button now using JavaScript since I know the onChange above will work. document.getElementById('sub').style.display = 'none'; </script>

Note that we show the button by default. We use JavaScript to hide the button -- since the JavaScript runs, we know that the SELECT's onChange event will work. Click here to see it in action!

请注意，我们默认显示按钮。 我们使用JavaScript隐藏按钮-自从JavaScript运行以来，我们知道SELECT的onChange事件将起作用。 单击此处查看其运行情况！

Taking tips from Google can serve you well!

采取Google的秘诀可以很好地为您服务！

翻译自: https://davidwalsh.name/noscript-compatible-select-form-element-onchange-event

相关资源：jdk-8u281-windows-x64.exe