jQuery 选择带有“其他”选项的框以显示输入文本字段。如何使用jquery为表单提交取回价值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3718760/
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
Select box with 'Other' option to display input text field. How to get value back for form submission using jquery?
提问by user338413
I've got a form with the following select box:
我有一个带有以下选择框的表单：
<fieldset id="workers_comp_info">
<p>
<label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
<select name="i_n_r_reason" id="i_n_r_reason">
<option value="No employees">No employees</option>
<option value="1-2 employees">1-2 employees</option>
<option value="Other">Other(Specify reason)</option>
</select>
<input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
</p>
</fieldset>
I've written the following jquery code to hide the "other_reason" text field unless "Other" is selected in the select box.
我编写了以下 jquery 代码来隐藏“other_reason”文本字段，除非在选择框中选择了“其他”。
$('#i_n_r_reason').change(function() {
$('#other_reason').toggle($(this).val()=='Other');
}).change();
I am creating a jquery method called SubmitForm. I want to write something like this:
我正在创建一个名为 SubmitForm 的 jquery 方法。我想写这样的东西：
function SubmitForm() {
if ($('#i_n_r_reason').val()=='Other')
('#i_n_r_reason').val = ('#other_reason').val
('#account_form').submit();
}
When the user selects 'Other', the text field is displayed for them to enter a reason. I want this reason to override 'Other' when the user submits the form. But its not happening with this code. Any suggestions?
当用户选择“其他”时，将显示文本字段供他们输入原因。当用户提交表单时，我希望这个原因覆盖“其他”。但它不会发生在这段代码中。有什么建议？
回答by perfectweb
xar's answer has some sweet functionality, but it doesn't accomplish the original goal of replacing the value of #i_n_r_reason with the value of #other_reason when "Other" is selected. I put it all together below.
xar 的答案有一些不错的功能，但它没有实现在选择“其他”时将 #i_n_r_reason 的值替换为 #other_reason 的值的原始目标。我把它放在了下面。
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.4");
</script>
<script type="text/javascript">
$(function(){
//initially hide the textbox
$("#other_reason").hide();
$('#i_n_r_reason').change(function() {
if($(this).find('option:selected').val() == "Other"){
$("#other_reason").show();
}else{
$("#other_reason").hide();
}
});
$("#other_reason").keyup(function(ev){
var othersOption = $('#i_n_r_reason').find('option:selected');
if(othersOption.val() == "Other")
{
ev.preventDefault();
//change the selected drop down text
$(othersOption).html($("#other_reason").val());
}
});
$('#form_id').submit(function() {
var othersOption = $('#i_n_r_reason').find('option:selected');
if(othersOption.val() == "Other")
{
// replace select value with text field value
othersOption.val($("#other_reason").val());
}
});
});
</script>
</head>
<body>
<form action="http://www.perfectweb.com/resources/post.php" id="form_id" method="post">
<fieldset id="workers_comp_info">
<p>
<label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
<select name="i_n_r_reason" id="i_n_r_reason">
<option value="No employees">No employees</option>
<option value="1-2 employees">1-2 employees</option>
<option value="Other">Other(Specify reason)</option>
</select>
<input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
</p>
</fieldset>
<input id="form_submit" type="submit" value="submit" />
</form>
</body>
</html>
回答by xar
<html>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(function(){
//initially hide the textbox
$("#other_reason").hide();
$('#i_n_r_reason').change(function() {
if($(this).find('option:selected').val() == "Other"){
$("#other_reason").show();
}else{
$("#other_reason").hide();
}
});
$("#other_reason").keyup(function(ev){
var othersOption = $('#i_n_r_reason').find('option:selected');
if(othersOption.val() == "Other"){
ev.preventDefault();
//change the selected drop down text
$(othersOption).html($("#other_reason").val());
}
});
});
</script>
</head>
<body>
<fieldset id="workers_comp_info">
<p>
<label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
<select name="i_n_r_reason" id="i_n_r_reason">
<option value="No employees">No employees</option>
<option value="1-2 employees">1-2 employees</option>
<option value="Other">Other(Specify reason)</option>
</select>
<input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
</p>
</fieldset>
</body>
</html>
So basically what it does is :
所以基本上它的作用是：
When the dropdown's changing, evaluate the value. If it's "Others" then show the textbox, else hide it.
当下拉列表发生变化时，评估值。如果是“其他”，则显示文本框，否则将其隐藏。
For the second part, upon submitting the form, evaluate the value of the selected drop down. If it's "Others", then prevent the form from submitting, instead change the text of the selected drop down list to the value from the text box.
对于第二部分，在提交表单时，评估所选下拉列表的值。如果是“其他”，则阻止表单提交，而是将所选下拉列表的文本更改为文本框中的值。
I guess the code is pretty explainable. Hope this helps.
我想代码很容易解释。希望这可以帮助。
EDITED
已编辑
回答by Patricia
function SubmitForm() {
if ($('#i_n_r_reason').val()=='Other')
('#i_n_r_reason').val = ('#other_reason').val
('#account_form').submit();
}
is that an exact copy of your current code? or a quick rewrite? there are so many things missing!!
这是您当前代码的精确副本吗？或快速重写？少了很多东西！！
i'm not sure you can set the value of a select box to something that isn't an option. what you could do is have a hidden field that stores the value of the select or the value of your extra textbox.
我不确定您可以将选择框的值设置为不是选项的值。您可以做的是有一个隐藏字段，用于存储选择的值或额外文本框的值。
so in your change() function on your select. set the value of the hidden field to the value of the select with something like:
所以在你选择的 change() 函数中。将隐藏字段的值设置为选择的值，如下所示：
$('#MyHiddenField').val($(this).val());
and in your form submit function do this:
并在您的表单提交功能中执行以下操作：
if ($('#i_n_r_reason').val()=='Other'){
$('#MyHiddenField').val($('#MyHiddenField').val());
}
