web-dev-qa-db-ja.com

JQUERY、AJAXおよびPHP

先に質問を投稿しましたが、あまり運がありませんでした。最初のドロップダウンの値に応じて、2番目のドロップダウンの内容をクリアし、ドロップダウンを再配置したいと考えています。

以下に示すように、次の選択ボックスがあります。

   <select name = "car" id="Cars" onchange="myFunction(this)">
            <option value="0">Toyota</option>
            <option value="1">Audi</option>
            <option value="2">Suzuki</option>
   </select>

このドロップダウンの下には、モデル用の別のドロップダウンもあります：

    <select id="emptyDropdown">
            <option value="0">R8</option>
            <option value="1">Quattro</option>
            <option value="2">A6 hatchback</option>
    </select>

onchange 2番目のドロップダウンをクリアし、自動車ブランドに関連するモデルを入力します。例えば。

Audi - A8, A6, A4 etc.
Suzuki - Swift, Panda etc.


<script>
  function myFunction(obj)
  {
    $('#emptyDropdown').empty()
    var dropDown = document.getElementById("carId");
    var carId = dropDown.options[dropDown.selectedIndex].value;
    $.ajax({
            type: "POST",
            url: "/project/main/getcars",
            data: { 'carId': carId  },
            success: function(msg){
                ?????????
            }
        });
  }
</script>

次に、以下に示すように次のPHP関数があります（私はcodeigniterを使用しています）-この関数はCar IDを使用し、以下に示すようにすべてのモデルのリストを返します。

public function getCars(){
        $this->load->model('car_model');

        $this->form_validation->set_rules('carId', 'carId', 'trim|xss_clean');

        if($this->form_validation->run()){
            $carId = $this->input->post('carId');
            $carModels = $this->user_management_model->getCarModels($carId);
        } else {
            echo "error";
        }   
}

その場合、PHPで生成された配列の各要素を返し、ID = "emptyDropdown"でドロップダウンリストを再作成する方法がわかりません。PHPで生成された配列は次の構造を持ちます。

Array ( [0] => Array ( [ModelName] => R8 V6 Twin Turbo [ModelID] => 19 ) [1] => Array ( [ModelName] => A6 Hatchback  [ModelID] => 107 ) )

質問を明確にするために-配列内の各要素をどのように取得し、これをドロップダウンリストの新しいオプションとして配置するのですか？配列をjavscriptに返し、ajax呼び出しのsuccessメソッドに再入力する方法はありますか？

どんな助けでも大歓迎です、事前に感謝します

javascriptphpjqueryajaxcodeigniter
12
TotalNewbie

この回答は、コードに必要な変更を提供します。

DISCLAIMER：正確なインストールが表示されない場合、インストールで「現状のまま」動作しないさまざまな要因がある可能性があることに注意してください。あなたのルートがどのように設定されているか、またはFirebugまたは他のコンソールを使用してajax呼び出しを監視しているかどうかはわかりませんが、これはビルディングブロックを提供するはずです：

まず、phpをoutput jsonエンコード文字列としての配列に変更します。

public function getCars(){
        $this->load->model('car_model');

        $this->form_validation->set_rules('carId', 'carId', 'trim|xss_clean');

        if($this->form_validation->run()){
            $carId = $this->input->post('carId');
            $carModels = $this->user_management_model->getCarModels($carId);
            // Add below to output the json for your javascript to pick up.
            echo json_encode($carModels);
            // a die here helps ensure a clean ajax call
            die();
        } else {
            echo "error";
        }   
}

次に、スクリプトajax呼び出しを変更して、データを取得してドロップダウンに追加する成功コールバックを設定します。

function myFunction(obj)
  {
    $('#emptyDropdown').empty()
    var dropDown = document.getElementById("carId");
    var carId = dropDown.options[dropDown.selectedIndex].value;
    $.ajax({
            type: "POST",
            url: "/project/main/getcars",
            data: { 'carId': carId  },
            success: function(data){
                // Parse the returned json data
                var opts = $.parseJSON(data);
                // Use jQuery's each to iterate over the opts value
                $.each(opts, function(i, d) {
                    // You will need to alter the below to get the right values from your json object.  Guessing that d.id / d.modelName are columns in your carModels data
                    $('#emptyDropdown').append('<option value="' + d.ModelID + '">' + d.ModelName + '</option>');
                });
            }
        });
  }

繰り返しますが、これらは構成要素です。ブラウザコンソールまたはFirebugなどのツールを使用して、AJAXリクエストと返されたデータを監視するので、必要に応じて変更できます。

24
cale_b