[英]Bootstrap Modal - Pass data into Modal using Javascript
我想使用java-script將select / drop-down數據傳遞給bootstrap模式。 我使用模態作為確認消息。
我的選擇/下拉是,
<select class="form-control" id="project" name="project_id">
<option value="1"> ABCD </option>
<option value="2"> EFGH </option>
<option value="3"> IJKL </option>
<option selected="selected" value="#">Please Select</option>
</select>
我正在使用javascript調用Bootstrap Modal,如下所示,
$('#project').change(function(){
var e = document.getElementById("project");
var p_id = e.options[e.selectedIndex].value;
var p_name = e.options[e.selectedIndex].text;
$('#myModal').modal('show');
});
Bootstrap 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"></h4>
</div>
<div class="modal-body modal-mt-hgt">
<form action="" method="post">
<p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p>
Enter Your Comment : <textarea rows="3"></textarea>
<input type="hidden" name="country" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add Task</button>
</div>
<?= form_close(); ?>
</div>
</div>
</div>
我想要做的是將/ show var p_id傳遞給隱藏字段,並在模式的<b id="p_name"></b>
一側顯示var p_name 。
進一步的p_id , p_name可以在用戶使用上面的javascript函數從Select / Drop-down中選擇任何選項時得到。 我只需要做的就是如何在Modal上顯示Project Name並將p_id分配到Modal的隱藏字段中
最好的祝福
我對這一切都很陌生,所以這可能不是最好的解決方案,但它是一個解決方案。
$('#project').on('change', function() {
var p_id = $(this).val();
var p_name = $(this).find(':selected').text();
$('#myModal').on('show.bs.modal', function ()
{
$(this).find('#p_name').text(p_name);
$(this).find('#p_id').val(p_id);
});
$('#myModal').modal('show');
});
您需要在隱藏字段中添加類或ID,以便識別它。 上面我給它一個p_id的ID。
<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"></h4>
</div>
<div class="modal-body modal-mt-hgt">
<form action="" method="post">
<p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p>
Enter Your Comment : <textarea rows="3"></textarea>
<input type="hidden" id="p_id" name="country" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add Task</button>
</div>
<?= form_close(); ?>
</div>
</div>
</div>
我認為這一切都是自我解釋但如果沒有,我們添加檢查以查看項目Dropdown何時更改,然后我們使用$(this)變量分配所選項的值和文本,以聲明它在#project下拉列表中ID。
接下來,我們添加一個監聽器來查看模態何時顯示,然后我們可以在那里操作模式我們想要的方式。 在此示例中,我們設置p_name文本並設置p_id的值。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.