phpのselectboxで選んでいるものをjsに渡したい。

Question

selectboxが2つあり、selectbox1で入力した内容にそって、selectbox2の内容を変えたいです。
今はselectbox1に対しては、コントローラーでdbから取得したものを$selectlistに入れてそれviewで表示させてるだけです。

それにあたり、まず第１段階として選択した内容をjsで取得したいんですが、

echo $this->Form->select(
    'Search.id',
    $selectlist,
    array(
      'empty' => '',
      'value' => $this->request->query('id'),
      'empty' => false,
	'onchange' => 'selectChange()',
    )
  );

$(document).ready(function() {
	function selectChange() {
		var selectedValue = $("#SearchId").val();
		console.log(selectedValue)
	}
}

上記のように書いてもうまくいきません。
consoleのエラーは以下です。

Uncaught ReferenceError: selectChange is not defined
    at HTMLSelectElement.onchange

selectには初期値は既に設定されており、ページを開いた直後に選択されているものを表示させたいです。
どう変えるべきですか？

cakephp2

Answer 1

#SearchIdというIDは正しいのでしょうか。PHPの出力結果であるHTMLで確認してみましょう。

Comments

[momolength]

はい正しいです。
この書き方でIdはコードのようになります。

[maisumakun]

上のコードを改めて確認してみましたが、selectChangeという関数を定義しているだけで実行していません。

selectChange()を呼ぶか、あるいはselectChange関数を立てずに.ready(function() {以下に直接コードを書くかをする必要があります。

[momolength]

なるほど。そういえばそうでした..。失礼しました。
ページ読み込みの時点で初期値設定されているので、それを取得したいんですが、
window.onload = function ~ としたら、選択を変えた時にまた同じエラーが出ます。

[maisumakun]

> window.onload = function ~ としたら、選択を変えた時にまた同じエラーが出ます。

そんな話はしていないのですが。

[momolength]

>selectには初期値は既に設定されており、ページを開いた直後に選択されているものを表示させたいです。
一緒に書いていたので把握されているものだと。結果を書いていなかったので分からないですよねすみません。

外に出したら動きました。選択ごとに値を取得できました。
質問文に書いてある通り、読み込み時に取得しかつ選択を変えた時にも取得したいです。
しかし、onloadをつければ、読み込み時に取得はできても選択を変えた時は質問文のエラーが出るようになってしまいます。

[maisumakun]

> 一緒に書いていたので把握されているものだと。

いえ、把握しています。

> 質問文に書いてある通り、読み込み時に取得しかつ選択を変えた時にも取得したいです。

質問文から「読み込み時に取得しかつ選択を変えた時にも取得したい」というのが読み取れなかったので、「まず第１段階として選択した内容をjsで取得したい」だけの実装を考えていました。

[momolength]

そうですか。はいわかりました。

Answer 2

Formヘルパーの第一引数はnameプロパティです。なので、idを指定したいならば
第三引数に追記する必要があります。

 //cakePHP4ならphpです
 $this->Form->select(
    'Search.id',
    $selectlist,
    array(
　　　'id' => 'searchId',
      'empty' => '',
      'value' => $this->request->query('id'),
      'empty' => false,
    'onchange' => 'selectChange()',
    )
  );

また、jQuery内で囲まれたイベントトリガーはjQueryのイベントを適用するので、その場合はjsのイベントトリガーは対応できません。今回はjsのonChangeイベントが使われているので、その場合はjQueryの指定は不要です。

//$(document).ready(function() { /*コメントアウトしてjQueryの外側へ*/
    function selectChange() {
        var selectedValue = $("#searchId").val();
        console.log(selectedValue)
    }
//}) 

逆に、index.ctpからonchangeプロパティとメソッドを消去して、jsに以下の

webroot/js/xxxx.js

    $('#SearchId').on("change",function(){
        var selectedValue = $(this).val();
        console.log(selectedValue)
    })

と記述すれば取得できます。

つまり、イベントトリガーはjQueryかJavascriptのいずれかにしか対応してません。

Comments

[momolength]

いいえ、この書き方でID値は設定されます。コードの通りです。

[FKM]

ブラウザの開発画面でテストしてみたらこうでるんですけど。idプロパティとオブジェクト変数のidキー、またはメンバを勘違いされてないですかね。

<select name="Search[id]" onchange="selectChange()">

[momolength]

いいえ、ですから id = にコードの通りの値が入っているんです。
IDは問題ないとして、他の方の指摘により選択時にconsolelogで取得はできるようになりました。
しかし、読み込み時に取得しかつ選択を変えた時にも取得したいです。
しかし、onloadをつければ、読み込み時に取得はできても選択を変えた時は質問文のエラーが出るようになってしまいます。

[FKM]

cakePHP2だとそういう仕様もあるのかも知れませんね、今手元にcake2の環境はないのですが、jsの挙動はわかりましたので、追記してます。

[momolength]

ご丁寧にありがとうございました。
これをどう処理するかはまだこれからの課題です。完了とします。