カスケード選択

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リクエストのための私のトリガーです。残りのコードでは、単純な返信メッセージを空のdiv#resultにダンプしようとしています。

私はテストを行いました。var vidが正しく入力されています。

ここで私はajaxを呼び出すためにしようとしているシンプルなPHPファイルです：

<?php 
$requ; 

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


echo $requ; 
?> 

私はおそらく問題は、私は私のいずれかを与えるためにPHPスクリプトを変更してidが正しく渡されていませんでしたと思いました$_POSTが設定されているかどうかに関係なく、有効な出力です。

私はそれをテスト中にdivにすべてダンプしようとしているので、私はHTMLを投稿しません。スクリプトを実行すると、「エラーが発生しました」というエラーメッセージが表示されます。この特定のjqueryの同行する

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：ここ

ではなく .ajaxの .postを使用して、私も試してみました他のjQuery & PHPで再び

$requ = $_POST['id']; 

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

echo json_encode($ret); 

を、それをすべて失敗しました。私はまた、jsonエンコーディング/パラメータを使わずに上記のコードを試しました。私がやってみたいのは、単純なドロップボックスをカスケード接続することだと思います。 2番目のボックスは、最初のボックスの選択に依存します。私はこのすべてが価値があるとは思えず、ちょうどGETでページを再投稿し、最初のクリックの結果で新しいセクションまたはdivを作成するためのリンクをPHPに厳密に固執していると思っています。あなたが持っているかもしれない助けや提案は大いに感謝されます、私はこれをすべて理解しようと2日を費やしました。事前にありがとう

Answer 1

申し訳ありませんが、私はそれを修正しました。 Mian_Khurram_ljazのおかげで、私はファイルの階層構造を見直すことができました。私は、jsがphpファイルをjsと同じフォルダに置くことによってPHPファイルを呼び出すので、私はurl: show_type.phpを使ってPHPを呼び出すことができると仮定していましたが、実際は間違っていました。私のjsフォルダにshow_type.phpファイルがあるので、構造はjsとphpを呼び出す実際のページから考えられるので、URLは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> 

おかげで再びミアン。

このコードは近い将来誰かに役立ちます。