級聯選擇

Question

對不起，這個問題的所有人，因爲我知道級聯選擇框已經死了，但我似乎無法找到任何好的幫助。我嘗試了各種各樣的東西，但似乎都失敗了，我不明白爲什麼。

這裏是jQuery的我目前：

function tester() { 
$("select#type").attr('disabled', 'disabled'); 
$("select#cat").change(function(){ 
      var vid = $("select#cat option:selected").attr('value'); 
      var request = $.ajax({ 
         url: "show_type.php", 
         type: "POST", 
         data: {id : vid} 
         }); 
       request.done(function(msg) { 
        $("#result").html(msg); 
       }); 
       request.fail(function(jqXHR, textStatus) { 
        alert("Request failed: " + textStatus); 
       }); 
     }); 
} 

不介意與select#type和select#cat，因爲這些代碼的第一部分是什麼，我試圖讓代碼填寫在第一，然而.change是我的.ajax請求的觸發器。剩下的代碼我只是試圖在成功的ajax請求時將簡單的返回消息轉儲到空的div#result。

我跑了一個測試，並且var vid填充正確。

這裏是我試圖與ajax調用簡單的PHP文件：

<?php 
$requ; 

if (isset($_POST['id'])) { 
    $requ = 'Worked'; 
} else { 
    $requ = "didn't work"; 
} 


echo $requ; 
?> 

我想也許是在id沒有被正確地傳遞的問題，所以我改變了PHP腳本來給我任何無論是否設置了$_POST，都將輸出有效的輸出。

我不會發布HTML，因爲我只是試圖將這一切轉儲到div而我測試它。當我運行腳本時，出現「請求失敗」錯誤消息，並顯示「錯誤」消息。

下面是其他的jQuery & PHP我也都試過了，使用.post代替.ajax：

function tester() { 
$("select#type").attr('disabled', 'disabled'); 
$("select#cat").change(function(){ 

      $("select#type").html("<option>wait...</option>"); 

      var vid = $("select#cat option:selected").attr('value'); 


      $.post("show_type.php", {id:vid}, function(data){ 
       $("#result").empty().append(data); 
      }, "json"); 
     }); 
} 

而且PHP陪這個特殊的jQuery：

$requ = $_POST['id']; 

$ret = 'You selected: ' . $requ; 

echo json_encode($ret); 

再次，全部失敗。我也嘗試了上面的代碼，而不使用json編碼/參數。我想要做的只是一個簡單的（所以我會想）級聯選擇Dropboxes。第二個框依賴於第一個框選擇。我開始認爲這一切都可能不值得，只是嚴格遵守PHP的鏈接，重新提交頁面爲GET，並用第一次點擊的結果填充新的部分或div。任何幫助或建議，你可能會不勝感激，我已經花了兩個堅實的日子，試圖全面瞭解這一點。在此先感謝

Answer 1

好吧，我把它修好了。感謝Mian_Khurram_ljaz讓我對文件的層次結構有了不同的看法。我假設，因爲js調用php文件，通過將php文件放在與js相同的文件夾中，我可以通過使用url: show_type.php調用php，但實際上這是錯誤的。該結構從調用js和php的實際頁面中考慮，因此url應該是js/show_type.php，因爲我的js文件夾中有show_type.php文件。

這總是一些小錯誤，需要你花幾天的時間來計算。對於那些在未來希望找到體面碼級聯選擇下拉框，這裏是我的功能和完全展開的代碼（其中還包括一個三級級聯） 的jQuery：

function project() { 
$("select#model2").attr('disabled', 'disabled'); 
$("select#brand2").attr('disabled', 'disabled'); 
$("select#project").change(function(){ 
    $("select#model2").attr('disabled', 'disabled'); // if changed after last element has been selected, will reset last boxes choice to default 
    $("select#model2").html('<option selected="selected">Choose...</option>'); 
    $("select#brand2").html("<option>Please wait...</option>"); 
    var pid = $("select#project option:selected").attr('value'); 

    $.post("handler/project.php", {id:pid}, function(data){ 
     $("select#brand2").removeAttr("disabled"); 
     $("select#brand2").html(data); 
    }); 
}); 
$("select#brand2").change(function(){ 
    $("select#model2").html("<option>Please wait...</option>"); 
    var bid = $("select#brand2 option:selected").attr('value'); 
    var pid = $("select#project option:selected").attr('value'); 

    $.post("handler/projBrand.php", {proj: pid, bran: bid}, function(data){ 
     $("select#model2").removeAttr("disabled"); 
     $("select#model2").html(data); 
    }); 
    }); 
} 

只要打電話的功能你的js的$(document).ready。

請注意，這個「冗餘」調用禁用並強制最後一個框選擇默認值，以防萬一用戶在所有3個框中進行選擇，但會返回到第一個框並更改選擇。

這裏是PHP處理程序文件：

<?php 
include_once('../includes/file.inc'); 


$request = $opt -> getModelvBrand(); 

echo $request; 
?> 

爲jQuery的另一個處理程序文件是幾乎完全一樣，只是調用一個不同的類文件的方法。

最後，在HTML：

<form action="" method="post"> 
     <select id="project"> 
      <option value="0">Choose...</option> 
      <?php echo $opt -> getProject();?> //populates first box on page load 
     </select> 
     <select id="brand2"> 
      <option value="0">Choose...</option> 
     </select> 
     <select id="model2"> 
      <option value="0">Choose...</option> 
     </select> 
     <br /><br /> 
     <input class="like-button" type="submit" title="Submit" value="" /> 
</form> 

再次感謝勉讓我走我的文件（或多個）不同的外觀。

希望這段代碼能夠在不久的將來幫助別人。