我对 JQuery 和 Javascript 的了解很差。
我有两个简单的表格。一种作为主要形式,带有输入类型文本和超链接。另一种形式是带有选择选项列表的 JQuery 模态对话框。
我想做的是:
如果用户单击超链接<a>See Milk</a>
从主表单,然后将显示一个 JQuery 模态对话框。
然后,如果从模态对话框中选择选项列表并单击“提交”,它应该关闭模态对话框并在主表单的输入类型上显示值。
这是主要表单的 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>
这是模态表单的 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>
最佳答案
这里是根据您的要求使用 JQuery UI 的演示代码。
//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" );
}
});
关于javascript - 从 JQuery 模态对话框获取值提交到另一个输入类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29664137/