如何将引导模式内的下拉列表的选定值获取到php中的文本框中
Posted
技术标签:
【中文标题】如何将引导模式内的下拉列表的选定值获取到php中的文本框中【英文标题】：how to get the selected value of a dropdown which is inside a bootstrap modal into a textbox in php 【发布时间】：2019-05-24 02:43:48 【问题描述】：[]
$( "#ddlcolors" ).change(function()
var sel = $( "#ddlcolors option:selected" ).val();
var textbox = document.getElementById("txtmanuid");
textbox.value =$( "#ddlcolors option:selected" ).text();
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">Launch modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<select required id="ddlcolors" class="text-success form-control input-sm">
<option class="text-success" selected disabled value=""><h6>-- Select Colors --</h6></option>
<option class="text-success text-center" value="R">Red</option>
<option class="text-success text-center" value="G">Green</option>
<option class="text-success text-center" value="B">Blue</option>
<option class="text-success text-center" value="O">Orange</option>
</select>
<input type="text" readonly id="txtmanuid" >
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>这就是我想要实现的目标：每当下拉列表的值发生变化时，相同的值应该显示在它旁边的文本框中。
请帮忙？？
【问题讨论】：
【参考方案1】：这是您预期的代码，
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<select required id="ddlcolors" class="text-success form-control input-sm">
<option class="text-success" selected disabled value="">
<h6>-- Select Colors --</h6>
</option>
<option class="text-success text-center" value="R">Red</option>
<option class="text-success text-center" value="G">Green</option>
<option class="text-success text-center" value="B">Blue</option>
<option class="text-success text-center" value="O">Orange</option>
</select>
<input type="text" readonly id="txtmanuid" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$( "#ddlcolors" ).change(function()
var sel = $( "#ddlcolors option:selected" ).val();
var txtman = $( "#ddlcolors option:selected" ).text()
$('#txtmanuid').val(txtman);
);
</script>
</body>
</html>【讨论】：
非常感谢您解决了我的问题并为我奉献了一些时间。非常感谢。 $( "#btnsend" ).click(function() var dataid = $(this).data('id'); 【参考方案2】：使用这个，
$( "#ddlcolors" ).change(function()
var sel = $( "#ddlcolors option:selected" ).val();
var textbox = document.getElementById("txtmanuid");
textbox.value =$( "#ddlcolors option:selected" ).text();
);
使用新的，
<!DOCTYPE html>
<html>
<head></head>
<body>
<select required id="ddlcolors" class="text-success form-control input-sm">
<option class="text-success" selected disabled value=""><h6>-- Select Colors --</h6></option>
<option class="text-success text-center" value="R">Red</option>
<option class="text-success text-center" value="G">Green</option>
<option class="text-success text-center" value="B">Blue</option>
<option class="text-success text-center" value="O">Orange</option>
</select> <input type="text" readonly id="txtmanuid" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( "#ddlcolors" ).change(function()
var sel = $( "#ddlcolors option:selected" ).val();
var txtman = $( "#ddlcolors option:selected" ).text()
$('#txtmanuid').val(txtman);
alert($( "#ddlcolors option:selected" ).text());
);
</script>
</body>
</html>
【讨论】：
谢谢，但它不起作用。下拉列表的选定值仍未显示在文本框中。请帮忙。很紧急， 请帮帮我 - 我已经更新了您在代码 sn-p 中发送给我的代码。它在这里完美运行，但不在我的本地主机上，为什么？这些是我提到的“JS”： 请指导我哪里错了？？ 为什么要添加 2 个 jquery 时间？只使用一个 在上面查看我的新答案。 使用任何一个 jquery 库。这解决了你的问题。【参考方案3】：试试这个：
$("#ddlcolors").change(function()
var selectedValue = $(this).children("option:selected").val();
var textbox = document.getElementById("txtmanuid");
textbox.value = selectedValue;
);
在上述代码前添加jquery：
<script src="js/jquery.min.js"></script>
【讨论】：
以上是关于如何将引导模式内的下拉列表的选定值获取到php中的文本框中的主要内容，如果未能解决你的问题，请参考以下文章