Question

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

我想要实现的是下拉列表的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>

Answer 1

您可以将带有当前所选表单选项的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
    }
}

jQuery on change dropdown调用web服务来加载选项

1 个答案: