提交时无法获取引导下拉列表的值

Posted 2023-05-08

【中文标题】提交时无法获取引导下拉列表的值

【英文标题】：Cannot get value of bootstrap dropdown on Submit

【发布时间】：2020-08-29 05:03:49

【问题描述】：

我有以下代码，当我单击提交按钮时，我希望获取显示在引导下拉按钮上的文本值，并且我希望将 POST 发送到 codeigniter 控制器以执行某些操作对其进行操作。 我需要帮助。

    <form method="post" action="#" id="user-order-form">
      <div class="users-order col-md-5">
        <label class=""> <strong>ORDER BY </strong></label>
        <div class="dropdown form-control" style="padding:0px; margin-left: 20px; margin-right:10px">
          <button class="btn btn-default dropdown-toggle form-control" type="button" id="user-order-dropdown" name="user-order-dropdown" data-toggle="dropdown">
            Surname
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelled-by="user-order-dropdown" id="capton">
            <li><a href="#">Surname </a> </li>
            <li><a href="#">First Name </a> </li>
            <li><a href="#">Company Name </a> </li>
          </ul>
        </div>
        <label class="radio-inline"><input type="radio" name="order-radio" checked>ASC</label>
        <label class="radio-inline"><input type="radio" name="order-radio">DESC</label>


        <button type="submit" class="btn" name="order-submit-btn" id="order-submit-btn">Order</button>
      </div>
    </form>

这是显示所选下拉项的 jquery 代码：

    $('.dropdown').each(function (key, dropdown) 
       var $dropdown = $(dropdown);
       $dropdown.find('.dropdown-menu a').on('click', function () 
          $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
       );
    );

【参考方案1】：

获取下拉列表的值：需要创建一个隐藏的输入框，并且每次下拉列表的值改变时，都需要更新 要获取controller 中的POST 数据：您需要（显然）创建一个控制器并在该控制器中创建一个函数。然后 将该 URL 提供给表单操作属性。

我已经为您编写了参考代码，并在 cmets 中进行了必要的解释，看看它是否对您有帮助。 查看

<form method="post" action="<?php echo base_url('some_controller/some_function');?>" id="user-order-form">
<!-- give the action where controller name(some_controller) and function name(some_function) -->
  <div class="users-order col-md-5">
    <label class=""> <strong>ORDER BY </strong></label>
    <div class="dropdown form-control" style="padding:0px; margin-left: 20px; margin-right:10px">
      <button class="btn btn-default dropdown-toggle form-control" type="button" id="user-order-dropdown" name="user-order-dropdown" data-toggle="dropdown">
        Surname
        <span class="caret"></span>
      </button>
      <!-- make a hidden field, give it a default value(which is initially selected), give it a name(it will be used to get the post data)-->
      <input type="hidden" name="dropdown" value="Surname"id="dropdown_input"/>
      <ul class="dropdown-menu" aria-labelled-by="user-order-dropdown" id="capton">
        <li><a href="#">Surname </a> </li>
        <li><a href="#">First Name </a> </li>
        <li><a href="#">Company Name </a> </li>
      </ul>
    </div>
    <label class="radio-inline"><input type="radio" name="order-radio" checked>ASC</label>
    <label class="radio-inline"><input type="radio" name="order-radio">DESC</label>
    <button type="submit" class="btn" name="order-submit-btn" id="order-submit-btn">Order</button>
  </div>
</form>

JQuery

   $('.dropdown').each(function (key, dropdown) 
       var $dropdown = $(dropdown);
       $dropdown.find('.dropdown-menu a').on('click', function () 
           $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
           $('#dropdown_input').val($(this).text()); // change the value of hidden input field
       );
    );

控制器(Some_controller.php)

function some_function()
    $dropdown    = $this->input->post('dropdown'); // get dropdown value
    $order_radio = $this->input->post('order-radio'); // get radio value
    /* Do whatever you want to with that data here(Eg - Save in DB) -- your logic */