如何使用 Bootstrap 将数据从下拉菜单传递到 CodeIgniter 中的 PHP


How to pass data from dropdown menu to PHP in CodeIgniter with Bootstrap

我正在使用Codeigniter和Bootstrap构建一个应用程序。

我想做的是有一个下拉菜单,它可以在 sql 中更改状态,然后在后台通过 AJAX 调用 PHP 脚本来执行此操作并显示确认消息 - 带有引导警报。一切都应该在没有页面刷新的情况下完成。

问题是我找不到在不通过 POST 刷新页面的情况下将变量从下拉列表传递到 PHP 的解决方案。

我正在尝试做这样的事情:

<!-- AJAX which hide the DIV -->
<script>
    $(document).ready(function(){
      $("#message").hide();
       $('#status li').click(function () {
            $("#message").show();
            $("#success-alert").load('<?php echo base_url() ?>/changestatus/150/', {my_var : $("#my_var").val()});
            $("#message").fadeTo(2000, 500).slideUp(500, function(){
               $("#message").hide();
            });
        });
    });
</script>

在上面的代码中,我想要一个链接,例如:/changestatus/150/2其中 150 是潜在顾客 ID 示例,2 是从下拉列表中选择的新状态。

<!-- Alert DIV, which is hidden on load -->
<div id="message">
    <div class="alert alert-success" id="success-alert">
        <button type="button" class="close" data-dismiss="alert">x</button>
        <strong>OK! </strong>
        The changes has been done :-)
    </div>
</div>

<!-- Dropdown menu -->
<div class="btn-group" id="myDropdown">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" id="status">
    <li><a href="#">Chg status to 1</a></li>
    <li><a href="#">Chg status to 2</a></li>
    <li><a href="#">Chg status to 3</a></li>
  </ul>
</div>

在上面的下拉列表中,我不知道将ID号1,2,3放在哪里。以及如何在用户单击选项时将其作为my_var发送到 AJAX..并在我的控制器中发挥作用

<?
    public function changestatus($lead_id)
    {
        //read a new status from segment in link...
        $new_status = $this->uri->segment(4),
        //...or from POST
        if(isset($_POST['my_var']))
        {
            $new_status = $_POST['my_var'];
        }
        // then will be some call to model which mades changes to DB
        echo '...done';
    }
?>

我花了一整天的时间试图做没有成功,如果你能:),请帮忙

您可以为所有li创建一个额外的属性并为其分配值。在 jQuery 代码中获取这些数据属性,并将其传递给 ajax 请求页面。

<ul class="dropdown-menu" id="status">
    <li data="1"><a href="#">Chg status to 1</a></li>
    <li data="2"><a href="#">Chg status to 2</a></li>
    <li data="3"><a href="#">Chg status to 3</a></li>
  </ul>

更改 jQuery 代码,如下所示:

$('#status li').click(function () {
            var my_var = $(this).attr('data'); //Use this value for your page
            $("#message").show();
            $("#success-alert").load('<?php echo base_url() ?>/changestatus/150/', {my_var : my_var});
            $("#message").fadeTo(2000, 500).slideUp(500, function(){
               $("#message").hide();
            });
    });
与其使用

$("#success-alert").load(),不如使用 $.post 发送帖子数据(在此处输入链接描述)。$.load 使用 GET 从 Web 服务器获取数据。