javascript PHP - 如何在没有按钮的情况下提交选择菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4029627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PHP - How to submit a select menu without a button
提问by mwotton
Is it possible to auto submit a select menu when the selection changes without using a button to submit the form. I have four of these on my page and using a button for each uses up too much space. By Select Menu, I mean:
是否可以在选择更改时自动提交选择菜单而不使用按钮提交表单。我的页面上有四个这样的按钮，每个按钮使用一个按钮会占用太多空间。通过选择菜单，我的意思是：
<select name="something" class="something" title="something something">
<option selected="selected">Option One</option>
<option >Option Two</option>
</select>
I would also like to add a confirm popup for the on change event. The following is what I use for buttons but it does not work for the select menu.
我还想为 on change 事件添加一个确认弹出窗口。以下是我用于按钮的内容，但它不适用于选择菜单。
onclick="return confirm('do you haz teh codz?');"
Any link to articles tutorials or examples would be greatly appreciated!
任何指向文章教程或示例的链接将不胜感激！
Thanks
谢谢
回答by mwotton
This is more appropriately tagged 'javascript' since it's javascript that you'll use to do it.
这更适合标记为“javascript”，因为您将使用它来执行此操作。
Add an 'onchange' event to the select. In the example below, 'form' should be substituted for your favourite method of targeting the form node.
将“onchange”事件添加到选择中。在下面的示例中，“form”应该替换为您最喜欢的定位表单节点的方法。
<select name="something" class="something" title="something something" onchange="form.submit()">
<option selected="selected">Option One</option>
<option >Option Two</option>
</select>
回答by Josh Leitzel
You need a JavaScript solution, not a PHP solution. PHP can only handle form data after it's been sent to the server; i.e., when the form has been submitted.
您需要一个 JavaScript 解决方案，而不是一个 PHP 解决方案。PHP 只能在发送到服务器后处理表单数据；即，当表单已提交时。
You can use JavaScript to:
您可以使用 JavaScript 来：
- Add an event listener to the
<select>to trigger when it changes (onchange). - When the
<select>changes, get its current value. - Based on the value, redirect the user (change
window.location) to the page you want them to go to.
- 将事件侦听器添加到
<select>以在更改时触发 (onchange)。 - 当
<select>发生变化时，获取其当前值。 - 根据该值，将用户（更改
window.location）重定向到您希望他们访问的页面。
Edit:I re-read your question and if you are just looking to submitthe form when the user changes the <select>, then mwotton's answer is probably the way to go. (Of course, move the JavaScript away from the HTML; it doesn't belong there.)
编辑：我重新阅读了你的问题，如果你只是想在用户更改时提交表单<select>，那么 mwotton 的答案可能是要走的路。（当然，将 JavaScript 从 HTML 移开；它不属于那里。）
For your confirmation, you can do something like this:
为了您的确认，您可以执行以下操作：
document.getElementById('my-select').onchange = function(){
return confirm('do you haz teh codz?');
});
(It's always a good idea to keep your JavaScript away from your HTML. So just give your <select>an ID like id="my-select"and you can access it from the JavaScript. You can also use a JavaScript library like jQueryto greatly ease your JavaScript programming.)
（让你的 JavaScript 远离你的 HTML 总是一个好主意。所以只要给你<select>一个 ID id="my-select"，你就可以从 JavaScript 访问它。你也可以使用像jQuery这样的 JavaScript 库来大大简化你的 JavaScript 编程。）
回答by Nervo Verdezoto
You can implement the onchangeevent for select object and inside the function make a reference to the form.submit();
您可以为选择对象实现onchange事件，并在函数内部引用form.submit();
回答by Kranu
Well, you need to know the form name/id or something. Assuming <form id="selectform">and <select id="selectelement">,
好吧，您需要知道表单名称/ID 或其他内容。假设<form id="selectform">和<select id="selectelement">,
window.onload=function() {
document.getElementById('selectelement').change = function() {
if(confirm('do you haz teh codz?'))
document.getElementById('selectform').submit();
else
return false;
return true;
}
}
The return false/true will determine whether or not to revert the select back to the original option.
return false/true 将决定是否将选择恢复到原始选项。
Here's a test: http://jsfiddle.net/yrqcj/2/
这是一个测试：http: //jsfiddle.net/yrqcj/2/
