0

ドロップダウンリストと可変量のオプション（チェックボックスとテキスト入力の形式）を備えたフォームがあります。

私が達成したいのは、ドロップダウン リストの値を変更し、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 リクエストを、フォームに追加する html を返す php Web サービスに送信できます。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 に答える