javascript 从 JQuery 模态对话框中获取值提交到另一种输入类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29664137/
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
Get Value from JQuery Modal Dialog Submit to another Input Type
提问by cocksparrer
I am so poor with JQuery & Javascript.
我对 JQuery 和 Javascript 太差了。
I have a two simple forms. One as primary form with an input type text & and a hyperlink. Another form as JQuery Modal Dialog with select option list.
我有两个简单的表格。一种作为输入类型文本 & 和超链接的主要形式。另一种形式为带有选择选项列表的 JQuery 模态对话框。
All I want to do is:
我想做的就是：
If user click the hyperlink <a>See Milk</a>from the primary form, then will showing a JQuery Modal Dialog.
如果用户单击<a>See Milk</a>主窗体中的超链接，则将显示 JQuery 模态对话框。
Then if the option list are selected from the Modal Dialog & click Submit, it should closing the Modal Dialog & showing the value on the input type at primary form.
然后，如果从模态对话框中选择选项列表并单击提交，它应该关闭模态对话框并在主表单中显示输入类型上的值。
Here is the HTML of Primary Form:
这是主表单的 HTML：
<form action="milk.php" id="milk_form">
<input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
<a id="milk_a_id" class="milk_a_class" data-target="#milk_modal" data-toggle="modal" href="">See Milk List</a>
</form>Here is the HTML of Modal Form:
这是模态表单的HTML：
<form action="milk.php" id="milk_form">
<input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
<a id="milk_a_id" class="milk_a_class" data-target="#milk_modal" data-toggle="modal" href="">See Milk List</a>
</form>回答by maxspan
Here is an Demo Code As per your requirement using JQuery UI.
这是根据您的要求使用 JQuery UI 的演示代码。
//HTML CODE
//HTML代码
<form action="milk.php" id="milk_form">
<input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
<a id="milk_a_id" href="#">See Milk List</a>
</form>
<div id="dialog" >
<select id="myselect" name="Icecream Flavours">
<option value="double chocolate">Double Chocolate</option>
<option value="vanilla">Vanilla</option>
<option value="strawberry">Strawberry</option>
<option value="caramel">Caramel</option>
</select>
</div>
//JQUERY
//查询
$(function() {
var dialog = $("#dialog" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": addUser,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
//Do Something
}
});
$( "#milk_a_id" ).on( "click", function() {
dialog.dialog( "open" );
});
function addUser(){
var selectedItem = $("#myselect option:selected" ).text();
$("#milk_input_id").val(selectedItem);
dialog.dialog( "close" );
}
});
