是否有任何解决方案可以显示从弹出窗口到选择字段的选定记录

Posted 2023-05-08

技术标签:

【中文标题】是否有任何解决方案可以显示从弹出窗口到选择字段的选定记录【英文标题】：Is there any solution to display selected records from popup to select field 【发布时间】：2020-04-29 12:58:30 【问题描述】：

我有一个选择下拉菜单。如果从下拉列表中选择了任何选项，则会显示一个弹出窗口。我只希望用户从弹出窗口中选择值，以便该值应显示在选择字段上。值应从生成弹出框的选择字段中显示。这是我的代码。

$("#select-me").on('change', function() 
    //alert($(this).val());
    if ($(this).val() == 1) 
      $("#myModal_first").modal('show');
    else if($(this).val() == 2) 
      $("#myModal_second").modal('show');
    
   );

.modal 
   text-align: center;
   
   @media screen and (min-width: 768px)  
   .modal:before 
   display: inline-block;
   vertical-align: middle;
   content: " ";
   height: 100%;
   
   
   .modal-dialog 
   display: inline-block;
   text-align: left;
   vertical-align: middle;
   
   .modal.show .modal-dialog 
   width: 100% !important;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<section class="ftco-section contact-section ftco-degree-bg">
   <div class="container bg-light">
      <div class="row block-9">
         <div class="col-md-12 pr-md-12">
            <form method="post" id="backtestForm" action="<?php echo $_SERVER['PHP_SELF']; ?>">
               <div class="form-group">
                  <label for="sel1">Select list:</label>
                  <select class="form-control" id="select-me">
                     <option value="1">Moving Average</option>
                     <option value="2">Exponential Moving Average</option>
                  </select>
               </div>
               <div class="form-group">
                  <div id="myModal_first" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
                           </div>
                           <button type="button" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <div id="myModal_second" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <div class="row block-9">
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="#">
                                          <option>SELECT THE OPTIONS</option>
                                          <option value="open">OPEN</option>
                                          <option value="close">CLOSE</option>
                                          <option value="low">LOW</option>
                                          <option value="high">HIGH</option>
                                       </select>
                                    </div>
                                 </div>
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="#">
                                          <option>SELECT THE OPTIONS</option>
                                          <option>1</option>
                                          <option>2</option>
                                          <option>3</option>
                                          <option>4</option>
                                          <option>5</option>
                                          <option>6</option>
                                          <option>7</option>
                                          <option>8</option>
                                          <option>9</option>
                                          <option>10</option>
                                       </select>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <button type="button" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <input type="submit" value="Send Message" class="btn btn-primary py-3 px-5">
               </div>
            </form>
            <?php echo "<h1>Hello</h1>"; ?>
         </div>
      </div>
   </div>
</section>

如您所见。我的问题是在从弹出窗口中选择值之后，因此这些记录应该显示在生成弹出窗口的选择字段上。

【问题讨论】：

与php或codeigniter无关，我将标签更改为html和css你会得到更好的结果。看起来像这样？ codepen.io/bobbiejwilson/pen/qrjgKE 感谢您的回复。我已经看到了给定的网址，这正是我的问题，但我想要解决如何在从弹出窗口中选择值后显示值。对不起！我不明白这个从弹出窗口中选择值后显示值您是要在弹出模式中选择用户值还是要在已选择的弹出窗口中显示下一个用户值？ @Dilek 请在您看到选择下拉列表的地方运行代码 sn-p。现在，如果您从选择下拉列表中选择任何选项，则会显示一个弹出窗口。现在，如果您输入一些值，那么您必须单击保存按钮。单击保存按钮后，这些值应显示在正确的位置。所以我希望这些值只显示在该选择下拉列表中。希望你现在明白我的意思。 【参考方案1】：

这是我从您的回答中得到的，模态将在 3 秒内完成提交后关闭，您需要创建一个 php 页面并将此 Your_php_submit_page.php 更改为您创建的页面以从模态插入数据。当模式关闭时，提交的数据将显示在主选择列表中。如果您不想关闭模态，并且想在模态的选择框中显示提交的数据，那么您需要在ajax中删除此功能setTimeouttotaly。

这里是阿贾克斯：

$(document).ready(function()
	$('#SecondForm').submit(function(event)
	event.preventDefault();
	var formValues = $(this).serialize();
		$.ajax(
		url:"Your_php_submit_page.php",
		method:"POST",
		data:formValues,
		dataType:"JSON",
			success:function(data)
				if(data.error === 'ok')
					$('#SecondForm').hide();
					$('#result').html('<p class="success">All gone well modal will close after 3 seconds.<p>');
					setTimeout(function() 
					$('#myModal_second').remove();
					$('.second2').remove();
					window.location.reload();
					, 3000);
				 else 
					$('#result').html(data.error);
					$('#SecondForm')[0].reset();
				
			
		);
	);	
	$('#change').change(function()
	  var title = $(this).val();
	  $('#myModal_second').modal('show');
	);
);

.modal 
   text-align: center;
   
   @media screen and (min-width: 768px)  
	   .modal:before 
	   display: inline-block;
	   vertical-align: middle;
	   content: " ";
	   height: 100%;
	   
   
   .modal-dialog 
	   display: inline-block;
	   text-align: left;
	   vertical-align: middle;
   
	   .modal.show .modal-dialog 
	   width: 100% !important;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<section class="ftco-section contact-section ftco-degree-bg">
   <div class="container bg-light">
      <div class="row block-9">
         <div class="col-md-12 pr-md-12">
            <form method="post" id="backtestForm" action="<?php echo $_SERVER['PHP_SELF']; ?>">
               <div class="form-group">
                  <label for="sel1">Select list:</label>
					<select id="change">
					  <option value="">Select One</option>
					  <option value="this">This</option>
					  <option value="that">That</option>
					</select>
               </div>
               <div class="form-group">
                  <div id="myModal_first" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
                           </div>
                           <button type="button" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <div id="myModal_second" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content second2">
                           <div class="modal-body">
                              <div class="row block-9">
							  <h4 class="modal-title">Our Modal title</h4>
								<form id="SecondForm">
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="#">
                                          <option>SELECT THE OPTIONS</option>
                                          <option value="open">OPEN</option>
                                          <option value="close">CLOSE</option>
                                          <option value="low">LOW</option>
                                          <option value="high">HIGH</option>
                                       </select>
                                    </div>
                                 </div>
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="#">
                                          <option>SELECT THE OPTIONS</option>
                                          <option>1</option>
                                          <option>2</option>
                                          <option>3</option>
                                          <option>4</option>
                                          <option>5</option>
                                          <option>6</option>
                                          <option>7</option>
                                          <option>8</option>
                                          <option>9</option>
                                          <option>10</option>
                                       </select>
                                    </div>
                                 </div>
							</form>
                              </div>
                           </div>
                           <button type="submit" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <input type="submit" value="Send Message" class="btn btn-primary py-3 px-5">
               </div>
            </form>
            <?php echo "<h1>Hello</h1>"; ?>
         </div>
      </div>
   </div>
</section>

Jsfiddle example

【讨论】：

以上是关于是否有任何解决方案可以显示从弹出窗口到选择字段的选定记录的主要内容，如果未能解决你的问题，请参考以下文章

无法从弹出窗口中的日历为 UITextField 设置值

从弹出窗口设置localStorage

无法从弹出窗口列表中选择项目 - android

从弹出窗口呈现视图

UIActionSheet 应该从弹出窗口中调用，但从主屏幕底部显示

Winforms c#从弹出表单更改父表单的背景图像