jQueryのappendが2回繰り返されて表示される

Question

動的にプルダウンを変更したいため、下記のようなPHPとJavaScriptを動かしましたが
先日（具体的な日付は不明）より、なぜか２回表示されてしまうようになりました。

まずPHPで配列から<option>タグを生成

<?php
$array_course = array('Aコース' => 'Aコース', 'Bコース' => 'Bコース', 'Cコース' => 'Cコース');
foreach($array_course as $key => $value){
$coursestr .= '<option value="'.$key.'">'.$value.'</option>';
}
 ?>

下記HTMLを記述しておいて

<select class="course"></select>

下記JavaScriptにてappend

<script type='text/javascript'>
$(function(){
$('select.course').append('<?php echo $coursestr; ?>');
});
</script>

すると

表示が2回重複されて書き出されてしまいます。
実際にはき出されたHTML（DOM）が

<select class="course">
<option value="Aコース"＞Aコース</option>
<option value="Bコース"＞Bコース</option>
<option value="Cコース"＞Cコース</option>
<option value="Aコース"＞Aコース</option>
<option value="Bコース"＞Bコース</option>
<option value="Cコース"＞Cコース</option>
</select>

と表示されてしまいます。
consoleで調べたところVMxxxx.jsというものが見つかり、恐らくこれが二回目に実行されているかと思います。

海外のサイトでも同じような現象について質問・回答を見つけましたが
英語が読めず、具体的な解決策がわからないままでおります。

http://stackoverflow.com/questions/17367560/chrome-development-tool-vm-file-from-javascript

こちら、1度で出力を停める方法はありますでしょうか？
どなたかご教示いただければと思います。

なにとぞ宜しくお願い致します。

〈追記〉参照のためJavaScriptのログを貼り付けました

Answer 1

コンタクトフォームというのはContact Form 7のことですかね？
プレーンなWordPress 4.3.1・テーマ__Twenty Fifteen__
Contact Form 7 __4.3__をインストール
コンタクトフォームに[select menu-XXX class:course]で空のセレクトタグを作成。
コンタクトフォームを埋め込んだページのテンプレートに示されていたPHPとjavascriptのコードを追記して試してみました。
スクリプトは1度しか呼ばれることはなく、selectタグも恐らく意図されている通りであろう下記出力となりました。

<select name="menu-XXX" class="wpcf7-form-control wpcf7-select course" aria-invalid="false">
  <option value="">---</option>
  <option value="Aコース">Aコース</option>
  <option value="Bコース">Bコース</option>
  <option value="Cコース">Cコース</option>
</select>

特にWordPressの場合は質問者様の環境は既に色々なプラグインやテーマのカスタマイズが行われているものですので、恐らく別のプラグインやスクリプトが原因で2回実行されているのではないかと思います。
まずは、問題を切り分ける所から初められるのが良いかと思います。

1. テーマを公式のプレーンのものに変えてみる -> 今のテーマ内に問題が有る
2. 1つ1つプラグインを停止してみる -> 停止したプラグインの中に原因がある
3. wp_enqueue_script()で読み込んでいるスクリプトを外してみる -> 外したスクリプトに原因

jQuery Mobileを使われているのであれば下記リンクに書かれているような可能性もあるかもしれません。
jQuery Mobileでscriptタグが2回実行されてハマった

原因究明よりとにかくまず解決しておきたいと言うことであれば、あまりよろしくないですがappend()なので追加されてしまっているのですからhtml()で丸っと置き換えてしまえば2回呼びされても1回呼び出した時と同じになるかと思います。

$(function(){
  $('select.course').html('<?php echo $coursestr; ?>');
});

---

追記: コメント欄にも書いたのですが、Ajaxで読み込まれたファイル内にscriptがあった時 ChromeのdevToolではVMxxxx として表示されるっぽい？ので

本件に関しては、プラグインか。他のスクリプトがAjaxでセレクトタグの中にオプションを追加するスクリプトを含む部分を再度読み込んでいるのかもしれません。

調べ方:
devTool > Networkタブ
XHRを選択して問題の有るページでリロード
リストが表示されるので、リストを選択し > Responsタブとかで、読み込まれたファイル中にセレクトタグの中にオプションを追加するスクリプトを含む部分が読み込まれてないか探してみる
のが良いかもしれません。

Comments

[Kama]

ご教示ありがとうございます。
申込フォームだったため、取り急ぎ動作するよう.htmlで書き換えたところ
正常に動作するようになりました。
本当にありがとうございます。

ただ今後もjQueryは使う予定なので、もうすこし勉強して解決できればと思います。

ご指示いただいきましたとおり、themeの変更やプラグインの停止なども検証ましして改めてご報告できればと思います。
＊まだ貼り付けたようなキャプチャ画像のようなかたちでコンソールがでてきているので、何かしら他の原因があるとは思います。

みなさん、本当にありがとうございました。

[KiKiKi_KiKi]

VM scriptってものの知識がないので、この回答は根本的な問題解決にはなってないのでもうしわけないです。
ページテーマに
```
jQuery.ajax({
url: '/test.html',
dataTyle: 'html',
type: 'get'
}).done(function(res){
jQuery('body').append(res);
});
```
とし、test.htmlには下記scriptを記述しました。
```
<script type='text/javascript'>
console.log('test.html');
</script>
```
これでちょっと試してみたところ、Ajaxで読み込んだHTMLにjavascriptがあり、そこでconsole.logするとChromeではVMxxxxと表示されるっぽい？？？

であれば、表示されているページのscriptを含んでいる部分ががAjaxで読み込まれてもう一度追加されているのが原因なのかもしれません。
ChromeのdeveloperツールのNetwork欄を開き XHR を選択して問題のあったページをリロード。リストに表示されるものの中にセレクトタグの中身を変更するscriptが含まれているものがあれば、それが原因になっているのかもしれません。

Answer 2

PHP「foreach」の閉じ（ これ → ｝ ）がある場所が問題ではないでしょうか？

Comments

[Kama]

申しわけございません、記載ミスです。
きちんとforeachの閉じタグはありました。
＊申しわけございません。。編集訂正します。

Answer 3

コードには問題が見当たりませんので他に原因があると思われます。
これだけ見るとJavaScriptが不要に思えますが、PHPで出力するのではダメなのでしょうか。

これだけでは原因を特定できませんのでPHPが出力したHTMLを確認して開示してください。

(9/29 14:42追記)
繰り返すようですが、php で echo するのではダメなのでしょうか。
挙げられている条件だけならば、下記コードで期待通りに動作するはずです。

<select class="course"><?php echo $coursestr; ?></select>

echoした結果は

<option value="Aコース">Aコース</option> <option value="Bコース">Bコース</option> <option value="Cコース">Cコース</option> と表示されます。

であるならば、JavaScript コードは下記のようになりますが、SyntaxError で強制終了される為、これが真実ならば別の処理で2回 option 要素が挿入されている事になります。

$(function(){
// この下の行で「SyntaxError: Unexpected token ILLEGAL」になる
$('select.course').append('<option value="Aコース">Aコース</option>
<option value="Bコース">Bコース</option>
<option value="Cコース">Cコース</option>');
});

挙げられている条件だけならば上のコードから改行を除くだけで期待通りに動作します(jsfiddleで確認済)

• Edit fiddle - JSFiddle

<select class="course"></select>

<script>
'use strict';
$(function(){
$('select.course').append('<option value="Aコース">Aコース</option><option value="Bコース">Bコース</option><option value="Cコース">Cコース</option>');
});
</script>

おそらく、実際には書いていない条件が複数あるのでしょう。
まず、問題の切り分けして下さい。
PHPが出力するHTMLを適当な場所に保存して不要な箇所を削除して動作に違いが出るか確認しましょう。
そして、問題が際限される最小限のコードがわかったらどの部分に原因があるかを突き止めます。
それでもわからなければ、最小限のコードをここに貼って質問してみてください。

Comments

[Kama]

ありがとうございます。

PHPで取得⇒JavaScriptで出力したい理由はWordpressのコンタクトフォームの
1項目を動的なプルダウンにしたい事があります。

PHPが出力したHTMLは

<select class="course">
<option value="Aコース"＞Aコース</option>
<option value="Bコース"＞Bコース</option>
<option value="Cコース"＞Cコース</option>
<option value="Aコース"＞Aコース</option>
<option value="Bコース"＞Bコース</option>
<option value="Cコース"＞Cコース</option>
</select>
＊実際には改行はなし

です。本来はABCで終わって欲しいですが、再度ABCがはき出されてしまいます。
Chromeのコンソールで調べると、

1回目の出力は意図したとおりにはき出されてますが
＊JavaScriptを埋め込んだ位置で機能しているのは確認済みです。

その他に再度、VM○○○○.jsというものが実行され
そちらの方で再度ABCコースがはき出されています。ここで計2回出力されているようです。

海外サイトなども調べたのですが
1）AjAXで再度読込を行っている？
２//@ sourceURL=dynamicScript.js というのが関係している
との事ですが、具体策がわからない状態です。

上記リンク先と同様にVM○○○○.jsがなぜ表示されるのか、どうしたら機能されないように設定できるのか、などがわかれば解決するのでは…と思っています。

回答になっているか不安ですが、どうぞ宜しくお願い致します。

[rk7fd3s]

think49さんが聞いているのは、

<script type='text/javascript'>
$(function(){
$('select.course').append('<?php echo $coursestr; ?>');
});
</script>

の箇所のことだと思われます。

VM○○○○.jsってのは、確かHTML内部のJSを動かす時の仮想ファイルな感じ。
気にしなくてOK。

※ ↑だと信じて生きてきたので、本当の答え持ってる人いたら教えてｗ

[Kama]

すみません、回答がずれていたかもしれません。

出力されているHTMLは

<select name="course" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required select course lg" id="course" aria-required="true" aria-invalid="false"><option value="">---</option><option value="Aコース"＞Aコース</option><option value="Bコース"＞Bコース</option><option value="Cコース"＞Cコース</option><option value="Aコース"＞Aコース</option><option value="Bコース"＞Bコース</option><option value="Cコース"＞Cコース</option></select>

となっています。

VM○○○.jsはデベロッパーのために出力される仮想のjsという事は、他サイトを読み概ねわかったのですが、クライアント（お客様）環境で見る時も、特にデベロッパーツールなども使っていないのにもかかわらず同じ現象が発生しているため、どうにかならないかな…と思っています。
＊僕も開発環境開いている時だけなのかな、、と思ってましたが違ったようです…。

質問の仕方が下手くそで申しわけございません。。
宜しくお願い致します。

[rk7fd3s]

<?php echo $coursestr; ?>

↑の部分の結果だけ出せませんか？

scriptタグの中が知りたいです。

[Kama]

echoした結果は

<option value="Aコース">Aコース</option>
<option value="Bコース">Bコース</option>
<option value="Cコース">Cコース</option>

と表示されます。

[Kama]

コンソール画面のキャプチャを追加させていただきました。
何かの手がかりになれればと思います。

[think49]

Kamaさん
親コメントに追記しました。
挙げられている条件には原因がないと思われます。問題を切り分けして最小限のコードを特定すると良いと思います。
何となく、他で既にoption要素の挿入処理があって、jQueryで2回目の処理が走っているような気もします。jQueryの該当コードを削除したら期待通りに動作した、なんて落ちがありそうな気がします。

[Kama]

think49さん
コメントありがとうございます。
私の説明が悪かったのですが、wordpressのContact form 7を使っている事に加え、他のプラグインも使用している事も含め、恐らく何かしら衝突が起こっているのかもしれません。

ひとつずつechoできればと思いますが、コースの種類が変動することと、 Form 7 というブラグインを使っているため、どうにかこうにか外部？からできればと思っていました。

think49さんからのアドバイスも含め、もう一度確認できればと思います。
色々とご教示いただきまして本当にありがとうございます。