【发布时间】: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">×</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">×</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你会得到更好的结果。
-
感谢您的回复。我已经看到了给定的网址,这正是我的问题,但我想要解决如何在从弹出窗口中选择值后显示值。
-
对不起!我不明白这个从弹出窗口中选择值后显示值您是要在弹出模式中选择用户值还是要在已选择的弹出窗口中显示下一个用户值?
-
@Dilek 请在您看到选择下拉列表的地方运行代码 sn-p。现在,如果您从选择下拉列表中选择任何选项,则会显示一个弹出窗口。现在,如果您输入一些值,那么您必须单击保存按钮。单击保存按钮后,这些值应显示在正确的位置。所以我希望这些值只显示在该选择下拉列表中。希望你现在明白我的意思。
标签: javascript jquery html css twitter-bootstrap-3