堆栈内存溢出
  繁体   English   中英

什么是jQuery，我可以在弹出窗口中显示所选复选框，下拉列表和flipswitch的文本值

[英]what will be the jQuery where i can display the text value of selected checkbox , dropdown list and flipswitch in the popup

 原文  2018-03-22 17:42:22  6   2    jquery/ html/ forms/ jquery-mobile/ popup

问题描述

这是表单接受输入的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>

2 个解决方案

解决方案1
 0 已采纳  2018-03-22 21:23:22

Checkboxradio小部件：

jQuery Mobile通过使用更悦耳的自定义ui-checkbox类将其包装在div来增强input 。

由于您已经在使用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小部件：

由于Flipswitch widget的类型可以是select或type checkbox ，因此框架中已经有一个内置方法来获取标题的文本，在此处记录： jQuery Mobile Flipswitch小部件

Selectmenu小部件：

我相信应该不会有任何问题，因为这些选项可以具有您想要的任何文本值，只需过滤掉并抓住所选的选项即可。 无论如何，这是一个示例： 

 $(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
 0  2018-03-23 05:24:45

这是我的工作代码。

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 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JQuery 设置下拉列表框选中选项 - 不是按值，而是按显示文本 以编程方式更改Jquery Mobile FlipSwitch选择的值 在 jQuery 的下拉菜单中显示所选值 如何使用jquery在下拉列表中显示选定的值 通过javascript显示文本而不是值选定的下拉列表 jquery 值在下拉选中禁用复选框 可以使用jQuery在上一个下拉列表中选择与其他下拉列表相同的值 jQuery下拉菜单修改选定的文本，但在随后的单击中显示先前选定的文本的原始值 如何使用索引值从下拉列表中选择文本？ jQuery从下拉列表中显示选定的选项文本
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM