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

【问题标题】：How to pass data from dropdown menu to PHP in CodeIgniter with Bootstrap如何使用 Bootstrap 将数据从下拉菜单传递到 CodeIgniter 中的 PHP
【发布时间】：2015-01-27 02:44:56
【问题描述】：

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

我想要做的是有一个下拉菜单可以改变sql中的状态，然后在后台通过AJAX调用PHP脚本来做到这一点并显示确认消息 - 带有引导警报。一切都应该在不刷新页面的情况下完成。

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

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

<!-- 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';
    }
?>

我花了一整天的时间试图做没有成功，如果可以的话请帮忙:)

【问题讨论】：

标签： php ajax twitter-bootstrap codeigniter

【解决方案1】：

您应该使用 $.post 来发送帖子数据，而不是使用 $("#success-alert").load() (enter link description here)。 $.load 使用 GET 从 Web 服务器获取数据。

【讨论】：

【解决方案2】：

您可以为所有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();
            });
    });

【讨论】：

非常感谢。像魅力一样工作:)