我試過jQuery的試驗和錯誤，但它不起作用

Question

我有一個形式與許多選擇使用PHP創建。表格有三種選擇：第二種選擇以第一種選擇爲條件，第三種選擇以第二種選擇爲條件。每個選擇都有一個這樣的id：type [00]，type [01]，type [02]; make [00]，make [01]，make [02];模型[00]，模型[01]，模型[02] ...

我使用this script。我試圖編輯代碼以適合我的需求，但我對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(); 
     } 

Answer 1

<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對象，包含多個鍵值對 - 其中之一是「ID」您需要。

注意：這是未經測試的午餐時間碼。當我有機會時，我會測試並給出更好的解釋。在此期間，希望代碼可以給你一些見解..