如何在模态体中传递多个data-id

时间:2017-04-27 07:04:50

标签: javascript php jquery html ajax

假设我有多个订单ID

$order_id='12345566778';
$prod_id='126778899';
$sell_id='373462562363';

当我选择特定的orderid时,我希望它传递php变量,这是弹出窗口的模态体,让我知道如何做到这一点我正在努力解决这个问题

<a rel="dialog" data-toggle="modal" data-id="<?=$order_id?>" href="#mymodal" data-target="#myModal" >
    <?php echo "<br> $order_id </br>";?>
</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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>

                <table class="table table-hover table-bordered" >
                    <tr style=" background-color:#00AAAD; color:#FFF; ">
                        <div class="modal-body">

                            i want to get that order id under php variable which i select           
                            here i want to display the data
                        </div>
                    </tr>
                </table>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

2 个答案:

答案 0 :(得分:3)

您可以使用jQuery.data()方法执行此操作。试试这个:

HTML代码

<a class="open-my-modal" rel="dialog" data-toggle="modal" data-id="<?=$order_id?>" data-prod-id="<?=$prod_id?>" data-sell-id="<?=$sell_id?>" href="#mymodal" data-target="#myModal" >
    <?php echo "<br> $order_id </br>";?>
</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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>

                <table class="table table-hover table-bordered" >
                    <tr style=" background-color:#00AAAD; color:#FFF; ">
                        <div class="modal-body">

                            <div id='order-id'></div>
                            <div id='prod-id'></div>
                            <div id='sell-id'></div>
                        </div>
                    </tr>
                </table>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

jQuery代码

$(document).ready(function () {             
    $('.open-my-modal').click(function(){
        $('#order-id').html($(this).data('id'));
        $('#prod-id').html($(this).data('prod-id'));
        $('#sell-id').html($(this).data('sell-id'));

         // show Modal
         $('#myModal').modal('show');
    });
});

答案 1 :(得分:0)

Theres你可以做到这一点.. 方法很简单,只需使用get或post方法使用变量传递。 在动作标签中放置当前页面的地址。

<form action='your_current_page' method='post'>
  <select name='id' id='order_id'>
    <option value='12345566778'>12345566778</option>
    <option value='126778899'>126778899</option>
    <option value='373462562363'>373462562363</option>
   </select>
<?php
  $order_id=$_POST['id']; # id is you name attribute in select tag
?>

这是你如何将变量从html传递给php ... 希望这能解决问题..