0

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

我想要实现的是下拉列表的 onchange 值，调用 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>
4

1 回答 1

4

您可以将带有当前选择的表单选项的 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
    }
}
于 2013-10-02T10:13:26.510 回答