什么是 jQuery，我可以在弹出窗口中显示选定复选框、下拉列表和翻转开关的文本值
Posted
技术标签:
【中文标题】什么是 jQuery，我可以在弹出窗口中显示选定复选框、下拉列表和翻转开关的文本值【英文标题】：what will be the jQuery where i can display the text value of selected checkbox , dropdown list and flipswitch in the popup 【发布时间】：2018-09-01 06:39:24 【问题描述】：这是表单接受输入的 html，点击提交后，所有输入都将显示在弹出窗口中。目前我只能在弹出窗口中显示文本。无法显示选定复选框和下拉列表的文本。如果选中或未选中，则只有下拉数字和复选框的 ON。
<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>
【问题讨论】：
你在哪里调用函数 showMessage() ？ 在表单后面的按钮中。一切正常，只需改进“varqualification = $("#checkbox1").val();”这段代码，以便我可以显示内部文本。 在下面查看我的答案。编辑了您的代码。 【参考方案1】：复选框收音机小部件：
jQuery Mobile 通过将div 包装在div 中来增强input，并使用更令人愉悦的自定义ui-checkbox 类。
由于您已经在使用label for 属性，我建议您从label 中解开input，并将label 与input 并排放置。这样，您可以通过在父div 中搜索相应的label 轻松获得Checkboxradio widget 的标题。
$(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());
);
);<!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 或checkbox 类型，因此框架中已经有一个内置方法来获取标题的文本，记录在此：
jQuery Mobile Flipswitch Widget
选择菜单小部件：
我相信应该没有任何问题，因为选项可以具有您想要的任何文本值，只需过滤掉并获取选定的选项。 无论如何，这是一个例子：
$(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());
);
);<!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 class="ui-field-contain">
<label for="select-custom-19">Multiple:</label>
<select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Choose options</option>
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<pre id="options">Options:<span></span></pre>
</div>
</body>
</html>【讨论】：
【参考方案2】：这是我的工作代码。
JS
$(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);
HTML
<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。
【讨论】：
以上是关于什么是 jQuery，我可以在弹出窗口中显示选定复选框、下拉列表和翻转开关的文本值的主要内容，如果未能解决你的问题，请参考以下文章
用jquery代码如何实现当我点击“查看”按钮时，在弹出窗口或弹出页面，显示数据库的详细数据
在 jQuery 弹出窗口或 MVC 4 的警报中显示错误消息
Bootstrap datepicker 在弹出窗口中不显示日期