Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function whether the user has JavaScript or not. The following is a quick explanation of how it works.
每当我进入Google Analytics(分析)时，都会在下拉列表区域中看到轻微的闪烁。 我看到一个按钮显示的时间最短，而且很the！ 走了 告诉我的是，无论用户是否使用JavaScript，Google都在使自己的网站发挥作用。 以下是其工作原理的简要说明。
View Demo
观看演示
XHTML (The XHTML)
<iframe id="site-frame" src="http://<?php echo $_POST['site'] ? $_POST['site'] : 'scriptandstyle.com'; ?>" style="border:1px solid #ccc;float:right;width:700px;height:500px;"></iframe>
<form action="" method="post">
<select name="site" id="site">
<option value="">Select a Site</option>
<option value="github.com/darkwing">GitHub</option>
<option value="mootools.net">MooTools</option>
<option value="scriptandstyle.com">Script & Style</option>
<option value="twitter.com/davidwalshblog">Twitter</option>
</select>
<input type="submit" value="Go" class="button" id="submit-button" />
</form>
My example is a dropdown list that manipulates an iFrame. Note that we use a form tag and submit button so that the site functions well without JavaScript.
我的示例是操作iFrame的下拉列表。 请注意，我们使用表单标签并提交按钮，以便该站点在没有JavaScript的情况下也能正常运行。
JavaScript (The JavaScript)
//when the window has loaded...
window.onload = function() {
//hide the button
document.getElementById('submit-button').style.display = 'none';
//our event function
var handler = function() {
if(select.value) {
document.getElementById('site-frame').src = 'http://' + select.value;
}
};
//add the event listener
var select = document.getElementById('site');
if(select.addEventListener){
select.addEventListener('change',handler,false);
}
else {
select.attachEvent('onchange',handler,false);
}
};
When the window loads, we hide the submit button and add the event listener. If the user doesn't have JavaScript, all of our JavaScript gets ignored. Simple.
加载窗口后，我们将隐藏“提交”按钮并添加事件侦听器。 如果用户没有JavaScript，我们所有JavaScript都会被忽略。 简单。
View Demo
观看演示
This system is very easy to implement and well worth the effort to make your website more accessible.
该系统易于实施，值得您为使您的网站更易于访问而付出的努力。
翻译自: https://davidwalsh.name/select-onchange
