PHP コンボボックスを動的に変更

Question

当方、開発初心者なので、説明が未熟かもしれません。。。
PHPでWeb上で申請データを入力して承認依頼を出すシステムを作っています。
MVCモデルでjavascriptも併用しています。
フレームワークにはCodeIgniterを使っています。
あるコンボボックス(hoge)の値を他のコンボボックス(piyo)の値によって動的に変更させたいのですが、なかなかうまくいきません。

データはOracleから取得していますがModelは問題なく動きデータの取得を確認しています。

発生している問題・エラーメッセージ

コンボボックスpiyoの値が変更されてもコンボボックスhogeの値が変更されない。

該当のソースコード

view
piyoコンボボックス

<dt class="l-np-form-cell-label-nowidth np-width-10per">
<label class="np-is-label-require" for="piyo">piyo</label>
</dt>
<dd class="l-np-form-cell-item np-width-15per">
<?php
if (isset($msg['piyo'])) {
echo form_dropdown('piyo', $piyoOptions, $piyo, 'class="np-select np-width-80per np-err-input-item" id="piyo" onchange="changepiyo();" tabindex="21"');
} else {
echo form_dropdown('piyo', $piyoOptions, $piyo, 'class="np-select np-width-80per" id="piyo" onchange="changepiyo();" tabindex="21"');
}
?>
<?php if (isset($msg['piyo'])): ?>
<span class="l-np-form-cell-item np-err-input-icon" style="display:inline;" onclick="showErrToolTip_INS('piyo','<?= $msg['piyo'] ?>')" ></span>
<?php endif; ?>
</dd>

hogeコンボボックス

<dt class="l-np-form-cell-label-nowidth np-width-10per">
<label class="np-is-label-require" for="hoge">hoge</label>
</dt>
<dd class="l-np-form-cell-item np-width-20per">
<?php
if (isset($msg['hoge'])) {
echo form_dropdown('hoge', $hogeOptions, $hoge, 'class="np-select np-width-80per np-err-input-item" id="hoge" tabindex="20"');
} else {
echo form_dropdown('hoge', $hogeOptions, $hoge, 'class="np-select np-width-80per" id="hoge" tabindex="20"');
}
?>
<?php if (isset($msg['hoge'])): ?>
<span class="l-np-form-cell-item np-err-input-icon" style="display:inline;" onclick="showErrToolTip_INS('hoge','<?= $msg['hoge'] ?>')" ></span>
<?php endif; ?>
</dd>
<dd class="l-np-form-cell-item">
</dd>

隠し項目

<input type="hidden" id="URL_Piyo"  name="URL_Piyo"    value="/changepiyo">

---

public function changepiyo{
    // URLの取得
    var url = document.getElementById('URL_Piyo').value;

    // リクエストデータの取得
    var piyoKbn = document.getElementById('piyo');
    var piyo    = piyoKbn.options[piyoKbn.selectedIndex].value;

    // 連想配列にデータ格納→JSON形式に編集
    var arry = {};
    arry.piyo  = piyo;
    var json = JSON.stringify(arry);

    $.ajax({
        type: 'post',
        url: url,
        contentType: "Content-Type: application/json; charset=UTF-8",
        data: json,
        dataType: 'json',
        async: false,
    })
    
    .done( function( data, textStatus, jqXHR ) {
    	
        // 結果値取得
        var cmb = data.cmb;

        var elmCmb = document.getElementById('hoge');
        while (0 < elmCmb.childNodes.length) {
            // コンボ設定値全件を削除
            elmCmb.removeChild(elmCmb.childNodes[0]);
        }

        for (var i = 0; i < cmb.length; i++) {
            // オプション要素を生成
            var elmOpt = document.createElement('option');
            var key = cmb[i][0];
            var elmTxt = cmb[i][1];
            elmOpt.setAttribute('value', key);
            elmOpt.innerHTML = elmTxt;

            // オプション要素をコンボに設定
            elmCmb.appendChild(elmOpt);
        }

        // コンボ選択値を初期位置に変更
        elmCmb.selectedIndex = 0;
    })
    .fail( function( jqXHR, textStatus, errorThrown ) {
        if (document.getElementById('ENV_MODE').value == 'production') {
            alert('再度操作をしてください。\nこのメッセージの表示が続く場合はログインし直してください。');
        } else {
            alert('非同期通信に失敗しました。status=[' + textStatus + '|' + jqXHR.status + '], error=[' + errorThrown + ']');
        }
    })
    ;
    return false;

---

34行目 for (var i = 0; i < cmb.length; i++) {
においてSCRIPT5007: 未定義または NULL 参照のプロパティ 'length' は取得できませんのエラー

console.log(data);結果
[object Object]{1: "グロス"}

controller

    public function changepiyo()
    {
        // モデルロード
        $this->load->model('Model');

        // リクエストデータの受信
        $request = $this->recieveAjax();

        //hogeの値を取得 
        $response['cmb'] = $this->Model->getHoge($request['piyo']);
        
        // レスポンスデータの送信
        $this->sendAjax($response);
    }

試したこと

データの流れは
onchangeによりjsのchangepiyo呼び出し、urlをAjaxで呼び出してcontrollerのchangepiyo呼び出し
という認識であっているでしょうか？

ここで約1週間ぐらいつまづいており、ほとんど手は出し尽くした感じです。
解答よろしくお願い致します。```ここに言語を入力
コード

Comments

[yambejp]

コンボボックス自体のソースがありませんが、どうやってコンボボックスを実現しているのでしょうか？

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

[m.ts10806]

#cmbNaiyo_Kbn というエレメントはどこにあるのでしょうか。 .done()で得られるdataは想定通りの内容なんですよね？

[ta_ku0419]

mts10806さん　cmbNaiyo_Kbn →　hoge と置き換えてください　.done()で得られるdataの値はまだ得られておらず想定通りのものかわかりません。

[m.ts10806]

そもそも.done()側に入っているのでしょうか？ 入っているならconsole.log(data);でないよう確認できるはずです。

[ta_ku0419]

javascript 34行目　for (var i = 0; i < cmb.length; i++) {　において 未定義または NULL 参照のプロパティ 'length' は取得できません エラーが出ました。

[m.ts10806]

レスポンスにcmdと名前がついたデータがないからじゃないですか？　console.log(data);で内容確認してください。その結果も質問に追記してください

[ta_ku0419]

レスポンスにcmbを追加しました。追加したところdataが[object Object]{cmb: Object {...}}　と表示されました。

[m.ts10806]

$this->sendAjax() はJSON形式になるような処理をしているのでしょうか？ dataType: 'json',としたからには返却する情報もjsonでなければなりません。

[ta_ku0419]

mts10806さんの質問から自分なりに考えやってみた結果無事解決することができました。ぜひ、ベストアンサーに選ばせていただきたいので、適当でいいので回答していただけませんか？

[m.ts10806]

いえ、私は回答のために不足している情報を突っ込んでいるだけなので解決策までは頭に浮かんでいないのでは書けません。なぜならベストアンサーは特に同じ問題を抱えた人が後で見る最初の解決策だからです。teratailでは質問者自身で回答を書き「ベストアンサー」とすることで「自己解決」ができるようになっています。 https://teratail.com/help#resolve-myself 私が突っ込んだところは問題解決のための考え方として使える部分と思うので、今後の参考にしてください。

Answer 1

そもそもPHPでの連想配列が$array['rensou']に対しjavascriptの配列がarray.rensouであることを理解していませんでした。
そのため、javascript側でdata.cmbで受け取っているならばcontroller側では$response['cmb']で渡してあげる必要がありました。