这是用于获取输入的表单的html，在单击提交时，所有输入都将显示在弹出窗口中。目前我只能在弹出窗口中显示文本。无法显示所选复选框和下拉列表的文本。如果选中或不选中，则只有下拉数字和复选框。
<body>
<div data-role = "page1">
<div data-role = "header">
<h2>Registration Form</h2>
</div>
<div data-role = "main" class = "ui-content">
<form >
<label for = "fname">Name</label>
<input type = "text" name = "fname" id = "fname"
placeholder = "Full Name">
<label for="textarea">Address:</label>
<textarea name="textarea" id="textarea"></textarea>
<label for = "select">Gender:</label>
<select name = "select" id = "select">
<option value = "0">Select</option>
<option value = "1">Male</option>
<option value = "2">Female</option>
<option value = "3">Other</option>
</select>
<label for = "select1">Category:</label>
<select name = "select1" id = "select1">
<option value = "0">Select</option>
<option value = "1">Open</option>
<option value = "2">OBC</option>
<option value = "3">SC/ST</option>
<option value = "4">Other</option>
</select>
<label for = "select2">State:</label>
<select name = "select2" id = "select2">
<option value = "0">Select</option>
<option value = "1">Pune</option>
<option value = "2">Chennai</option>
<option value = "3">Bangalore</option>
</select>
<label for = "select3">District:</label>
<select name = "select3" id = "select3">
<option value = "0">Select</option>
<option value = "1">A</option>
<option value = "1">A</option>
<option value = "1">A</option>
<option value = "2">B</option>
<option value = "2">B</option>
<option value = "2">B</option>
<option value = "3">C</option>
<option value = "3">C</option>
<option value = "3">C</option>
</select>
Education Qualification
<label for = "checkbox1">
<input type = "checkbox" id = "checkbox1">BE
</label>
<label for = "checkbox2">
<input type = "checkbox" id = "checkbox2">MCA
</label>
Newsletter
<input type = "checkbox" data-role = "flipswitch"><br/>
</form>
<a href = "#popup_dialog" data-rel = "popup" data-position-to = "window"
data-transition = "pop" class = "ui-btn ui-btn-b" onclick="showMessage()">Submit</a>
</div>
</div>
<div data-role = "popup" id = "popup_dialog" data-theme = "b"
data-dismissible = "false">
<div data-role = "header" >
<h2 class = "ui-title">Confirmation</h2>
</div>
<div data-role = "main" >
<p> Name: <span id = "display_fname"></span> </p>
<p> Address: <span id = "display_textarea"></span> </p>
<p> Gender: <span id = "display_select"></span> </p>
<p> Category: <span id = "display_select1"></span> </p>
<p> State: <span id = "display_select2"></span> </p>
<p> District: <span id = "display_select3"></span> </p>
<p> Qualification: <span id = "display_checkbox"></span> </p>
</div>
<div data-role = "footer" >
<a href = "#" class = "ui-btn ui-btn-inline ui-btn-b btn-1" data-rel = "back">
OK</a>
<a href = "#" class = "ui-btn ui-btn-inline ui-btn-b btn-2" data-rel = "back">
Back</a>
</div>
</div>
</body>
这是我用于在弹出窗口中显示表单输入的jQuery。 还告诉我是否有更好的方法来编写整个jQuery。
< script >
$(document).ready(function() {
$("#select2").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select3').html(options);
});
});
function showMessage() {
var name = $("#fname").val();
var address = $("#textarea").val();
var gender = $("#select").val();
var category = $("#select1 option:selected").html();
var state = $("#select2").val();
var district = $("#select3").val();
var qualification = $("#checkbox1").val();
$("#display_fname").html(name);
$("#display_textarea").html(address);
$("#display_select").html(gender);
$("#display_select1").html(category);
$("#display_select2").html(state);
$("#display_select3").html(district);
$("#display_checkbox").html(qualification);
}
</script>
答案 0 :(得分：0)
Checkboxradio小部件：
jQuery Mobile通过将input包装在一个更愉快的自定义div类中来增强ui-checkbox。
由于您已使用label for属性，我建议您从input打开label并将label与{{1}并排放置}}。这样，您可以通过搜索父input内的相应Checkboxradio widget轻松获取label的标题。
div$(document).ready(function() {
$("input[type=checkbox]").change(function() {
var qualifications = [];
$("input[type=checkbox]").each(function(index) {
if (this.checked) {
var caption = $(this).parent().find("label").text();
qualifications.push(caption);
}
});
$("#qualifications span").text(qualifications.toString());
});
});
Flipswitch小部件：
由于<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-one" data-role="page">
<div role="main" class="ui-content" id="page-1-content">
<label for="checkbox1">BE</label>
<input type="checkbox" id="checkbox1">
<label for="checkbox2">MCA</label>
<input type="checkbox" id="checkbox2">
</div>
<pre id="qualifications">Qualifications:<span></span></pre>
</div>
</body>
</html>可以是Flipswitch widget类型或类型select，因此框架中已有一个内置方法来获取标题文本，在此处记录：
jQuery Mobile Flipswitch Widget
Selectmenu小部件：
我相信不应该有任何问题，因为选项可以包含您想要的任何文本值，只需过滤掉并抓取所选选项即可。 无论如何，这是一个例子：
checkbox$(document).ready(function() {
$("#select-custom-19").change(function() {
var options = [];
$("#select-custom-19 option").filter(":selected").each(function(index) {
var option = $(this).text();
options.push(option);
});
$("#options span").text(options.toString());
});
});
答案 1 :(得分：0)
这是我的工作代码。
$(document).ready(function() {
$("#select2").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select3').html(options);
});
});
function showMessage() {
var name = $("#fname").val();
var address = $("#textarea").val();
var gender = $("#select").val();
var category = $("#select1 option:selected").html();
var state = $("#select2").val();
var district = $("#select3").val();
var qualification = $(".education_radio").val();
var newsletter = "Off";
if($("#newsletter").prop("checked")){
newsletter = "On";
}
$("#display_fname").html(name);
$("#display_textarea").html(address);
$("#display_select").html(gender);
$("#display_select1").html(category);
$("#display_select2").html(state);
$("#display_select3").html(district);
$("#display_checkbox").html(qualification);
$("#display_newsletter").html(newsletter);
}
<div data-role = "page1">
<div data-role = "header">
<h2>Registration Form</h2>
</div>
<div data-role = "main" class = "ui-content">
<form >
<label for = "fname">Name</label>
<input type = "text" name = "fname" id = "fname"
placeholder = "Full Name">
<label for="textarea">Address:</label>
<textarea name="textarea" id="textarea"></textarea>
<label for = "select">Gender:</label>
<select name = "select" id = "select">
<option value = "0">Select</option>
<option value = "1">Male</option>
<option value = "2">Female</option>
<option value = "3">Other</option>
</select>
<label for = "select1">Category:</label>
<select name = "select1" id = "select1">
<option value = "0">Select</option>
<option value = "1">Open</option>
<option value = "2">OBC</option>
<option value = "3">SC/ST</option>
<option value = "4">Other</option>
</select>
<label for = "select2">State:</label>
<select name = "select2" id = "select2">
<option value = "0">Select</option>
<option value = "1">Pune</option>
<option value = "2">Chennai</option>
<option value = "3">Bangalore</option>
</select>
<label for = "select3">District:</label>
<select name = "select3" id = "select3">
<option value = "0">Select</option>
<option value = "1">A</option>
<option value = "1">A</option>
<option value = "1">A</option>
<option value = "2">B</option>
<option value = "2">B</option>
<option value = "2">B</option>
<option value = "3">C</option>
<option value = "3">C</option>
<option value = "3">C</option>
</select>
Education Qualification
<label for = "radio1">
<input type = "radio" id = "radio1" value="BE" class="education_radio" name="education">BE
</label>
<label for = "radio2" value="MCA">
<input type = "radio" class="education_radio" id = "radio2" name="education">MCA
</label>
Newsletter
<input type = "checkbox" data-role="flipswitch" id="newsletter" name="flip-1"><br/>
</form>
<a href = "#popup_dialog" data-rel = "popup" data-position-to = "window"
data-transition = "pop" class = "ui-btn ui-btn-b" onclick="showMessage()">Submit</a>
</div>
</div>
<div data-role = "popup" id = "popup_dialog" data-theme = "b"
data-dismissible = "false">
<div data-role = "header" >
<h2 class = "ui-title">Confirmation</h2>
</div>
<div data-role = "main" >
<p> Name: <span id = "display_fname"></span> </p>
<p> Address: <span id = "display_textarea"></span> </p>
<p> Gender: <span id = "display_select"></span> </p>
<p> Category: <span id = "display_select1"></span> </p>
<p> State: <span id = "display_select2"></span> </p>
<p> District: <span id = "display_select3"></span> </p>
<p> Qualification: <span id = "display_checkbox"></span> </p>
<p> Newsletter: <span id = "display_newsletter"></span> </p>
</div>
<div data-role = "footer" >
<a href = "#" class = "ui-btn ui-btn-inline ui-btn-b btn-1" data-rel = "back">
OK</a>
<a href = "#" class = "ui-btn ui-btn-inline ui-btn-b btn-2" data-rel = "back">
Back</a>
</div>
</div>
您需要为复选框赋予价值。我把它们变成了收音机，因为教育只能是一个。还在简报复选框中进行了更改，请查看它。
这是一个有效的codepen。