j查询更改下拉列表调用 Web 服务以加载选项

jQuery on change dropdown call web service to load options

本文关键字：服务 加载 选项 Web 调用 查询 下拉列表      更新时间：2023-09-26

我有一个带有下拉列表和可变数量的选项（以复选框和文本输入的形式）的表单。

我想要实现的是更改下拉列表的值，调用 Web 服务并加载其下的各种选项。我知道我大致必须使用 jQuery 的 onchange 事件并让 Ajax 将标记加载到div 中。

但是我究竟如何实现这一目标呢？

我正在使用 Bootstrap 3，我的一些表单代码如下。不过，我不确定如何编写我的Javascript或Ajax部分。

下拉列表 

      <div class="form-group">
        <label for="inputBranch" class="col-lg-2 control-label">Branch</label>
        <div class="col-lg-10">
          <select class="form-control" id="resBranch">
          <?php
            // print all branch name
            // if is same as merchantID, mark as selected
            foreach($branchesArray as $branch) {
              if($branch['merchantID'] == $merchantID) {
                echo "<option selected>" . $branch['name'] . "</option>";
              } else {
                echo "<option>" . $branch['name'] . "</option>";
              }
            }
          ?>
          </select>
        </div>
      </div>

选项

      <div class="form-group">
        <label for="" class="col-lg-2 control-label">Options</label>
        <div class="col-lg-10">
        <?php
        foreach ($featuresArray as $feature) {
        ?>
          <div class="checkbox">
            <label>
              <input type="checkbox" value="<?php echo $feature['customValue']; ?>">
              <?php echo $feature['customValue']; ?>
            </label>
          </div>
        <?php
        } // end foreach
        ?>
        </div>
      </div>

您可以将带有当前所选表单选项的 ajax 请求发送到 php Web 服务，该服务返回要添加到表单中的 html。js 可能看起来像这样：

$( document ).ready(function () {
   $('select').change(function () {
      $.get('ajax.php?option=' + $('select').val(), function(data) {
          if(data == "error")
          {
              //handle error
          }
          else {
              $('div.ajax-form').append(data); //create an element where you want to add 
                                               //this data
          }
      });
   });
 });

PHP 可能如下所示：

if(isset($_GET['option'])) {
    if($_GET['option'] == 1)
    {
        //echo form data for option one here 
    }
    elseif($_GET['option'] == 2)
    {
        //echo form options for option two here 
    }
    elseif($_GET['option'] == 3)
    {
        //echo form options for option two here 
    }
    //other options here
    else
    {
        echo "error"; //select value not correct
    }
}
相关文章：