-2

PHPで作成された多くの選択を含むフォームがあります。フォームには 3 種類の選択があります。2 番目の選択は最初の選択を条件とし、3 番目の選択は 2 番目の選択を条件とします。すべての選択には次のような ID があります: type[00], type [01], type[02]; メイク[00]、メイク[01]、メイク[02]; モデル[00]、モデル[01]、モデル[02] ...

私はこのスクリプトを使用します。必要に応じてコードを編集しようとしましたが、Java や jquery については何も知りません。問題は関数 finishAjax だと思います。なぜなら、どの選択でもIDが異なると言う方法がわからないからです。

$(document).ready(function() {

        $('select[id^="type"]').change(function(){

            $('select[id^="make"').fadeOut();

            $.post("ajax/ajax_make.php", {
                type: $('select[id^="type"]').val()
            }, function(response){
                setTimeout("finishAjax('make', '"+escape(response)+"')", 400);
            });
            return false;
        });

        $('select[id^="make"').change(function(){

            $('select[id^="model"').fadeOut();

            $.post("ajax/ajax_model.php", {
                type: $('select[id^="type"]').val(),
                make: $('select[id^="make"').val()
            }, function(response){
                setTimeout("finishAjax('model', '"+escape(response)+"')", 400);
            });
            return false;
        });

        });

        function finishAjax(id, response){

         $('select[id^="'+id+'"]').html(unescape(response));
         $('select[id^="'+id+'"]').fadeIn();
        }
4

1 に答える 1

0 
<select name="type_0" data-id="0" class="type">
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

<select name="type_1" data-id="1" class="type">
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

<select name="make_0" data-id="0" class="make">
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

<select name="make_1" data-id="1" class="make">
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>


<script type="text/javascript">
  $(document).ready(function() {

    /** Execute an ajax request **/
    function dispatchRequest(url, data, timeout) 
    {
      setTimeout(function() {
        $.ajax({
          type    : "POST",
          url     : url,
          data    : data,
          success : finishAjax,
          type    : "JSON"
        });
      }, timeout);
    };

    /** Finish AJAX request **/
    function finishAjax(response)
    {
      /** IMPORTANT 

        response is now a JSON object, this is just a simple string
        that represents a complex object. I this case, it is up to the
        target URL (ajax/ajax_make.php) to create this string by using 
        the provided data (id,type)

        At a minimum we need three values:

        response.HTML = HTML of the select options
        response.id   = The identity of the select item
        response.type = The type of select option

      **/

      $("select[name=" + response.type + "_" + response.id)
        .html(unescape(response.html))
        .fadeIn();
    }

    /** Find ALL the selects of each type, hence class selector **/
    $selectType = $(".type");
    $selectMake = $(".make");

    /** 
      Change event for "type" select option 
    **/
    $selectType.on("change", function(){
      var id  = $(this).data("id");

      /** Hide all "make" select options **/
      $selectMake.each(function(){
        $(this).fadeOut();
      });

      dispatchRequest("ajax/ajax_make.php", {
        id   : $(this).data("id"),
        type : $(this).attr("class")
      }, 1000);

      return true;
    });


  });
</script>

重要な変更点は、応答が複数のキーと値のペアを含む JSON オブジェクトであることです。そのうちの 1 つは、必要な「id」です。

注: これはテストされていないランチタイム コードです。機会があれば、テストしてより良い説明をします。それまでの間、うまくいけば、コードはあなたにいくつかの洞察を与えることができます..

于 2013-03-19T14:28:03.470 に答える