不明点があり、再度お世話になります。

#前提・実現したいこと
・PHPによってあらかじめHTMLの<option>が生成されており、Fullcalendarの「fc-next-button」というクラス名が付いたボタンを押したときに、JavaScriptによって現在のURLの値を用いて<option>のvalueの値を変更したい。

・現状の問題解決

現状の問題

・現状では、ボタンを押す度にvalueの後ろが長くなる。

分かりづらいかと思いますので・・・

◆PHPによってあらかじめHTML<option>の生成した内容

<option class="query" value="./index.php?no=1">名前１</option>
<option class="query" value="./index.php?no=2">名前２</option>
・
・
（以後繰り返し）
・
・
<option class="query" value="./index.php?no=60">名前６０</option>

があります。

ここまでは問題ないのですが、ここから

●fc-next-button」というクラス名が付いたボタンを2回押したとき

<option class="query" value="./index.php?no=1&year=2018&month=10&day=01&view=month&year=2018&month=11&day=01&view=month">名前１</option>
・
・
（以後繰り返し）
・
・
<option class="query" value="./index.php?no=60&year=2018&month=10&day=01&view=month&year=2018&month=11&day=01&view=month">名前６０</option>

●fc-next-button」というクラス名が付いたボタンを3回押したとき

<option class="query" value="./index.php?no=1&year=2018&month=10&day=01&view=month&year=2018&month=11&day=01&view=month&year=2018&month=12&day=01&view=month">名前１</option>
・
・
（以後繰り返し）
・
・
<option class="query" value="./index.php?no=60&year=2018&month=10&day=01&view=month&year=2018&month=11&day=01&view=month&year=2018&month=12&day=01&view=month">名前６０</option>

となります。
つまり余計なクエリーが増えてしまう状態です。

最終的に例えば3回目ボタンを押したら


<option class="query" value="./index.php?no=1&year=2018&month=12&day=01&view=month">名前１</option>
・
・
（以後繰り返し）
・
・
<option class="query" value="./index.php?no=60&year=2018&month=12&day=01&view=month">名前６０</option>

にしたいです。

※一応念のため
当月が9月だった場合3回押したときは12月なので取得するのは、
month=12の方です。

該当のソースコード

$('.fc-next-button').click(function(){
    select_query();
});

function select_query(){
var arg = param();
var year = arg.year;
var month = arg.month;
var day = arg.day;
var view = arg.view;

var getValue = [];
  for (var i = 0; i<60;i++) {
    getValue[i] = $('#ge'+i).val();
    if(getValue[i]!=undefined){
     var path = getValue[i]+"&year="+year+"&month="+month+"&day="+day+"&view="+view;
    }
  }
  $('.query').val(path);
}
});

function param(){
// URLパラメータ取得
  var arg  = new Object;
  url = location.search.substring(1).split('&');
  for(i=0; url[i]; i++) {
    var k = url[i].split('=');
    arg[k[0]] = k[1];
  }
  return arg;
}

試したこと

takey様の
getValue[i] = getValue[i].split("&")[0];

追加を試しましたがnoまで変わってしまうので解決にはなっていませんでした・・
◆追加後

・
・
・

コメントへの返信

コメント欄には入力しづらいため、こちらに記述します。

crsh様
コメントありがとうございます。
申し訳ありませんが長いので引用させていただきます。

ページを初めて表示した状態のURLは「http://○○○/index.php」で、ユーザーを選択するなんらかの処理を行うとURLが「http://○○○/index.php?no=3(noパラメータは2桁頭0付きのno=03でしょうか)」

・すみません、加筆修正では、2桁になっておりましたがnoパラメータは0から9までは一桁ですね。
noパラメータ自体は、1~60まで存在します。

(ユーザー3を選択した場合)に変わり、日付に関するなんらかの処理を行うとURLが「http://○○○/index.php?no=3&year=2018&month=10&day=07&view=month」」(「月」表示の時に「2018年10月7日」を選択した場合。jQueryのFullCalenderプラグインを使ったことが無いのですが、日付選択時などの処理でしょうか)に変わるとうことでしょうか。

・今回、あくまでもFullcalendarの「fc-next-button」というクラス名が付いたボタンを押したときの処理の部分のことなので該当ソースには載せていませんが

１．『「fc-next-button」というクラス名が付いたボタンを押した後』にオプション値変更。
※今回の目的

２．変更後、オプション選択し検索ボタンを押すとページに飛ぶ。
といった処理になっています。

検索ボタンを押した際のページに飛ぶ動作内容としては、
単純に『ユーザー3の2018年10月7日(monthページ）』
です。

飛ぶための条件として、URLパラメーターから取得している形です。
→条件に必要なのは、
no（どのユーザーに飛ぶか）
year（どの年に飛ぶか）
month（どの月に飛ぶか）
day（どの日に飛ぶか）
view（月、週、日のどのページに飛ぶか）

以上の全てになります。

ID重複の指摘によって <option> の id="ge2"の記述を削除していただいているようですが、それに伴い提示していただいたソースコードを実行しても現象が再現しなくなっています(「select_query」関数の「$('#ge'+i).val();」の部分が必ず undefined になるため、現状提示いただいているコードだとボタンを押すたびにパラメータが追加されるという現象は発生しません。もちろんそれによって、他の不具合は発生しています)。また、ボタンを2回押したとき・3回押したときについても再現しません(再現しないというより別の不具合が発生しています。

すみません、個人的になりますが休みのため手元にコードがないためこちらテラテイルのコード内容をテスト確認せず修正しておりました。
休み明け（9日火曜日）になりますが、IDで別の名前つけられるように修正する予定です。（名前というかge2,ge3,ge4・・・といった連番ですかね）

「$('.query').val(path);」がforループの外側で実行されているので、「query」クラスが付いた<option>すべてのvalue値が同じ値に変更されてしまうため)。あとforループの処理について、「getValue[i] = $('#ge'+i).val();」は元々<option>に指定していたidを元にvalueを使おうとしているのですがこれは何のための処理でしょうか。

optionの値がそれぞれ違いますのでそれぞれの内容を取得しようとidを元に取得しておりました。
他により良い方法があれば、そちらを選びます。

optionの内容としては、
『◆PHPによってあらかじめHTML<option>の生成した内容
でnoの値が違います。

<option>のvalueの「no=3」部分を取得したいがための処理でしょうか。(<option>のvalueの値を元にgetValueの配列に格納して、配列から値を取り出して使うのには何か意味があるのでしょうか。現状のコードだけを見るとループカウンタのiを使って「no=3」部分を生成すれば良いような気がするのですが、それだと何か問題があるのでしょうか)

valueの「no=3」部分を取得したいがための処理で合っています。
私としては、こうした方がコード短くなるのかなと思ってやっておりました。

一応、意味としては、
元のデータ『◆PHPによってあらかじめHTML<option>の生成した内容』のnoの内容を残しておきたかったのです。
このnoは、名前1～60と連動しており、さらに抜けが存在することがあります。

例えば、
オプションのno１、no２、no３と続いて　いきなりno３０で割り振られたりします。

この場合forですと
no1 名前１
no2 名前２
no30 名前３

になってしまいます。

以上ですが、↑についてfor文でもif文の追加でやれば出来ると思いますのでfor文でも構いません。
あくまでも結果が重視なので過程はあまり考えていません。

取得したい情報としては、
no
year
month
day
view

です。

##crsh様へ開発ツール該当のシンタックスエラー

↑ご覧通り、$optionsが消えてしまっています。
黄色になっているところ以外にも消えている個所があります・・

※標準APIの方はシンタックスエラーがありませんでした。

m.ts10806

2018/09/28 10:03

大事なことを端折りすぎているような気がします。大変申し訳ないですが意味が分からないです。「select_queryを呼び出すたびに」とありますが、呼び出している箇所が見当たりません。最初のコードはPHPでしょうか？1行だけ書かれても何をどうやってそうなっているかわかりませんので、なるべく全体がわかるコードを提示してください。

kirin311

2018/09/28 10:15

コメントありがとうございます。重要なのはJSの方かと思いPHPの方は最低限にしておりました。こちらの内容になりますがこれで良いでしょうか？

IshibashiTanaka

2018/09/28 10:36

実現したいことが絶妙にわかりません。<option value="">のvalueの中を変更したいということでしょうか。それとも、optionを新しく追加したいのでしょうか。何が「ネズミ算式で増えてしまう」のでしょうか。

kirin311

2018/09/28 10:37

コメントありがとうございます。前者のValueの中身を変更したいです。

kirin311

2018/09/28 10:45

ネズミ算式という表現は的確ではないと思いましたので文章内容を変えました。基本的に『分かりづらいかと思いますので・・・』をご覧いただければご理解いただけると思います。

yambejp

2018/09/28 12:46

主旨違いますが「mysql_query」を使っているようですが、いまやありえない関数なので自己解決できないなら使うべきではありません

kirin311

2018/09/28 13:29

コメント、ありがとうございます。私自身もPDOを使えば良いとは思ってはいるんですが、そこまで変更となると、今回の内容だけでなく他のファイル群まで手を出さねばならなくなるので・・・

crsh

2018/10/06 04:00 編集

実現したいこと自体は<option>のvalueを正しく設定したいという単純な内容に思うのですが、他の方も書いておられますが何を実現したいのか分からないため他の方も回答できずにいるのではないかと思います。困られているようなので出来れば回答したいので確認させていただきたいのですが、実現したい内容はPHPのコードはあまり関係なく、『PHPによってあらかじめHTMLの<option>が生成されており、「fc-next-button」というクラス名が付いたボタンを押下したときに、JavaScriptによって現在のURLの値を用いて<option>のvalueの値を変更したい。』ということで合ってますでしょうか。もしそれで合っているのであれば、PHPやJavaScriptのコードはいったん抜きにして、『処理を行う前のHTMLの状態(valueが変わる前の<select>部分のコード)』と『処理を行った後に実現したいHTMLの状態(valueが変わった後の<select>部分のコード)』および location を使用する処理のようなので『実際のURL』を記述していただければ何を実現したいのか伝わるのではないかと思います。

kirin311

2018/10/06 09:42

ありがとうございます、内容の編集を時間かけて考えてみます。ただ質問する身で申し訳ないのですが、実際のURLは勘弁してください・・

m.ts10806

2018/10/06 11:07

要件に合っているかどうかは別としてID重複とoptionタグへのID追加はなんとかしましょう。あまりoptionタグにIDつけても意味がないかと思いますし、何かしら意味を持たそうにもIDは1ページ内に1つというのがルールです。複数あってはもはや”ID”ではありません。

kirin311

2018/10/06 11:20

ご指摘ありがとうございます。ID削除いたしました。

crsh

2018/10/06 23:49 編集

質問内容の加筆修正いただきありがとうございます。実際のURLが提示できないのであれば、公開できない箇所は ○○○ などで表示していただければ問題ありません。ページを初めて表示した状態のURLは「http://○○○/index.php」で、ユーザーを選択するなんらかの処理を行うとURLが「http://○○○/index.php?no=3(noパラメータは2桁頭0付きのno=03でしょうか)」(ユーザー3を選択した場合)に変わり、日付に関するなんらかの処理を行うとURLが「http://○○○/index.php?no=3&year=2018&month=10&day=07&view=month」」(「月」表示の時に「2018年10月7日」を選択した場合。jQueryのFullCalenderプラグインを使ったことが無いのですが、日付選択時などの処理でしょうか)に変わるとうことでしょうか。 ID重複の指摘によって <option> の id="ge2"の記述を削除していただいているようですが、それに伴い提示していただいたソースコードを実行しても現象が再現しなくなっています(「select_query」関数の「$('#ge'+i).val();」の部分が必ず undefined になるため、現状提示いただいているコードだとボタンを押すたびにパラメータが追加されるという現象は発生しません。もちろんそれによって、他の不具合は発生しています)。また、ボタンを2回押したとき・3回押したときについても再現しません(再現しないというより別の不具合が発生しています。「$('.query').val(path);」がforループの外側で実行されているので、「query」クラスが付いた<option>すべてのvalue値が同じ値に変更されてしまうため)。あとforループの処理について、「getValue[i] = $('#ge'+i).val();」は元々<option>に指定していたidを元にvalueを使おうとしているのですがこれは何のための処理でしょうか。<option>のvalueの「no=3」部分を取得したいがための処理でしょうか。(<option>のvalueの値を元にgetValueの配列に格納して、配列から値を取り出して使うのには何か意味があるのでしょうか。現状のコードだけを見るとループカウンタのiを使って「no=3」部分を生成すれば良いような気がするのですが、それだと何か問題があるのでしょうか。<option>のvalueから何か他にも取得したい情報があるということでしょうか)

kirin311

2018/10/07 00:47

コメントありがとうございます、長くなりますので加筆修正の方で返信させていただきました。

行動規範の内容に同意します

回答3件

ベストアンサー

質問内容の加筆修正および質問に回答していただきありがとうございました。
以下の通り回答いたします。

前提となるHTML

オプションのno１、no２、no３と続いて　いきなりno３０で割り振られたりします。

IDで別の名前つけられるように修正する予定です。（名前というかge2,ge3,ge4・・・といった連番ですかね）

とのことなので、PHPによって以下のようなHTMLが出力されていると仮定します。

HTML
1<select id="user">
2    <option id="ge1" class="query" value="./index.php?no=1">名前１</option>
3    <option id="ge2" class="query" value="./index.php?no=2">名前２</option>
4    <option id="ge3" class="query" value="./index.php?no=3">名前３</option>
5    <option id="ge30" class="query" value="./index.php?no=30">名前３０</option>
6</select>

なぜ余計なパラメータが重複してしまうか

他の方の回答と重複する内容となりますが、$('#ge'+i).val()で得られる値は
1回目の呼び出しでは
"./index.php?no=1"
なので
"./index.php?no=1"の後ろに"&year=2018&month=10&day=01&view=month"
が連結されて
"index.php?no=1&year=2018&month=10&day=01&view=month"
となるため、うまくいってるように見えるのですが

ここで注意しなければならないのは、その際にoptionのvalueの値は
index.php?no=1&year=2018&month=10&day=01&view=month
に書き換わってしまってしまっているということです。

したがって、2回目の呼び出しで$('#ge'+i).val()で得られる値は
"./index.php?no=1"
ではなく
"index.php?no=1&year=2018&month=10&day=01&view=month"
に書き換わってしまっているため
"index.php?no=1&year=2018&month=10&day=01&view=month"
の後ろに
"&year=2018&month=10&day=01&view=month"
が連結されて
"no=1&year=2018&month=10&day=01&view=month&year=2018&month=11&day=01&view=month"
になってしまうということです。

3回目以降は上記の繰り返しとなり、パラメータがどんどん重複してしまうということです。

したがって、もしoptionのvalueを元に新たな値を生成したいのであれば
上記の通り1回目と2回目でvalueの値が変わっていることも考慮したコードに
する必要があるのですが、今回の場合、

valueの「no=3」部分を取得したいがための処理で合っています。

とのことなので、noのパラメータを取得するために、あえてoptionのvalueの値を
使用する必要はないかと思います。
他の実装方法で、何をやりたいのか分かりやすいコードにすべきかと思います。
(実際のJavaScriptのコードは後述します)

ループ処理について

optionのvalueの値を変更したいということであれば、select_query関数の

for (var i = 0; i<60;i++) {

このforループは、ユーザーの上限が60人ということでi<60としていると推測しますが

実現したい内容は

<option>のvalueの値を変更したい

であるわけで、また

オプションのno１、no２、no３と続いて　いきなりno３０で割り振られたりします。

なので、60回ループさせる必要は無く、optionタグの要素を取得してループさせるべきです。

そうすることでループ内の判定if(getValue[i]!=undefined){も必要もなくなり、
コードが短くなり、何をやりたいのか分かりやすいコードになるかと思います。

また、ユーザーの上限が60人固定ではないのであれば、なおさらこのような実装にすべきではありません。

JavaScriptの処理について

以上を踏まえて、提示していただいているコードを元に以下のように書き換えることで実現できるかと思います。

なお、$('.fc-next-button')のクリックイベントに直接記述してしまっていますが、
関数に切り出す必要があれば切り出して実装してください。

以下のコードでは、パラメータnoはoptionのidを元に取得するようにした例です。
下記のようにすることで、valueの値にパラメータが含まれているかどうかを考慮する必要がなくなります。

JavaScript
1$('.fc-next-button').on('click',() => {
2    const arg = param();
3    const $options = $('#user option');
4    $options.each((i, option) => {
5        const $option = $(option);
6        const id = $option.attr('id');
7        const no = id.match(/^ge(\d+)$/)[1];
8        const path = `./index.php?no=${no}&year=${arg.year}&month=${arg.month}&day=${arg.day}&view=${arg.view}`;
9        $option.val(path);
10    });
11});

また、この程度の処理であればjQueryを使わずとも標準APIで可能です。

JavaScript
1$('.fc-next-button').on('click',() => {
2    const arg = param();
3    const options = document.querySelectorAll('#user option');
4    options.forEach(option => {
5        const id = option.id;
6        const no = id.match(/^ge(\d+)$/)[1];
7        const path = `./index.php?no=${no}&year=${arg.year}&month=${arg.month}&day=${arg.day}&view=${arg.view}`;
8        option.value = path;
9    });
10});

なお、上記はパラメータnoを取得する際に、質問内容のコードを元にした実装にしたため
optionのidを元に正規表現を使って取得していますが、意味の無いidの指定は
好ましくないため、カスタムデータ属性(data-*)を使って

HTML
1<option data-no="3" class="query" value="./index.php?no=3">名前３</option>

のようにしておき、以下のいずれか

JavaScript
1// jQuery
2const no = $option.data('no');
3
4// 標準API
5const no = option.dataset.no;
6
7// もしくは (標準API)
8const no = option.getAttribute('data-no');

で値を取得するのが、より良い方法かと思います。

対象ブラウザについて

ここまで記述した後に質問内容などを見直していたのですが

すみません、個人的になりますが休みのため手元にコードがないため

であったり

主旨違いますが「mysql_query」を使っているようですが、いまやありえない関数なので自己解決できないなら使うべきではありません

コメント、ありがとうございます。私自身もPDOを使えば良いとは思ってはいるんですが、そこまで変更となると、今回の内容だけでなく他のファイル群まで手を出さねばならなくなるので・・・

ということや、JavaScriptの変数の宣言にvarを使用していることから推測すると、
かなり古い業務システムの保守対応案件などでしょうか。

(それとも単純に、参考にしたコードが過去の本や過去のホームページなどというだけでしょうか)

何を気にしてるかと言いますと、対象ブラウザがレガシーなIE8やIE11などが含まれていますでしょうか。

それらのブラウザ(特にIE8)はJavaScriptのバージョンが古いため、上記で記したコードは一部動作しない箇所が
あるため、それらのブラウザでも動作するように古い記法に置き換えて実装していただく必要があります。

もし、レガシーなブラウザが対象であるが、古い記法への置き換え方が分からないようであれば
古い記法でのコードを追記しますのでその旨返信ください。

投稿2018/10/07 03:09

編集2018/10/07 05:17

crsh

総合スコア30

kirin311

2018/10/07 04:08

回答、ありがとうございます、解説が丁寧で凄くわかりやすく理解出来ました。特に『なぜ余計なパラメータが重複してしまうか』で2回目からの呼び出しの部分からが目からうろこが落ちる思いです。 1回目の処理だけで考えず2回目からの処理も考える必要があったのですね。他の方の回答では、失礼ですが正直理解ができませんでしたのですごく助かりました。コードの提示までありがとうございます。休み明け（9日）に試してみます。 > 対象ブラウザについて保守対応案件でしょうか。いままでの別の方が作ってたファイルが存在しており、その内容を私が改変しているといった感じですね。正直、私自身の知識不足のため根本的に大幅な内容を変更はあまり出来ない状態です。ユーザー側の利用ブラウザについてですが、最新のChrome、Firefox、IE11の利用を考えております。古い記法への置き換え方が分からないのですが、変数の宣言にvarって古いのでしょうか？ mysql_queryはともかくvarはこちらで追加したものなので。正直古い新しいが理解できていません・・・

crsh

2018/10/07 05:24 編集

回答内容についてご理解頂けたようで幸いです。 ■JavaScriptの仕様の古い新しいについて JavaScriptはECMAScript(以下、ESと略します)によって仕様が定義されており、ES5、ES2015(旧名称：ES6)、ES2016、ES2017、・・・とバージョンが挙がっており、新しい機能がどんどん追加されています。 (特にES5からES2015では大幅な機能追加がありました。「ES2015 新機能」や「ES6 新機能」などで検索して新機能を解説しているページを見ておくことをお勧めします) 通常は新しい機能(新しい記法)の方が、より書きやすかったり、不具合が発生しにくかったりするため、通常は新しい記法の方を使います。そのため、通常であれば使わない古い仕様の機能(古い記法「今回で言えば変数定義 var」)が使われていたため、レガシーなブラウザへの対応が必要なのかと思った次第です。なお、IE8やIE11といったブラウザは・IE8 ：ES5 ・IE11：ES2015の一部機能のみ実装といったように、かなり古い仕様にしか対応しておりません。 ■変数宣言 var について変数定義 var についてですが、ES2015 で let および const が追加されました。そのため、変数定義 var はES5以前の物であり、かなり古い書き方ということです。 (古い仕様ですが言語仕様として廃止されたわけではないので記述すれば動作はします) 現在は変数宣言する際には、関数スコープとなる var に変わって、ブロックスコープとなる let および const を使用します。通常は const を使っておき、値の再代入が必要な場合に限り let を使用するのが一般的です。 (詳しくは「var let const」で検索していただければ、それぞれの違いが解説されているページが見つかるかと思います) ■対象ブラウザによるJavaScriptの置き換えについて Chroem、Firefox は上記回答のコードで動作しますが、IE11はES2015の新機能である・「アロー関数(arrow functions)」・・・「( xxx )=>{」の箇所・「テンプレートリテラル(Template literal)」・・・バッククォート(`)で囲って${}を使ってる箇所が使えないので置き換えが必要です。 (それぞれの詳しい仕様については、索していただいて調べていただければと思います) 最初に記述したとおり、IE11は「ES2015の一部機能のみ実装」となっており、「let/const」は実装されていますが上記の仕様は実装されていません。それぞれ、アロー関数の箇所は「$('.fc-next-button').on('click',() => {」から「$('.fc-next-button').on('click',function(){」「$options.each((i, option) => {」から「$options.each(function(i, option){」に、それぞれ置き換えてください。 ※また、IE11は標準APIの document.querySelectorAll の戻り値の NodeList に forEach メソッドが実装されていないため、アロー関数以外にも修正が必要になりますが割愛します。また、テンプレートリテラルの箇所は「const path = `./index.php?no=${no}&year=${arg.year}&month=${arg.month}&day=${arg.day}&view=${arg.view}`;」から「const path = './index.php?no=' + no +'&year=' + arg.year + '&month=' + arg.month + '&day=' + arg.day + '&view=' + arg.view;」に、置き換えてください。これでIE11でも動作するはずです。

kirin311

2018/10/07 05:53

再度ありがとうございます。 ESについて、始めて知りました。どんどん新しい記法が追加されていってるのですね。今後作成するときは、調べて活用していきたいと思います。 > 対象ブラウザによるJavaScriptの置き換えについてコードの追記、ありがとうございます。凄く助かります、置き換えたコードを使わせていただきます。

kirin311

2018/10/09 00:38

実際に入力させていただいたところ、 Jqueryの方のコードでは開発ツールで確認すると、 .each((i, option) => {の行でシンタックスエラーが出てたのですが、標準APIの方を利用したところ、問題なく動作しました。何故シンタックスエラーとなるのかわかりませんが、記述先がPHPファイルのせいでしょうか？ $optionsという変数？が消えてしまっているので。

crsh

2018/10/09 12:27 編集

>.each((i, option) => {の行でシンタックスエラーが出てたのですが、 >標準APIの方を利用したところ、問題なく動作しました。アロー関数および標準API のコードを使用したということは、IE11 ではなく Chrome もしくは Firefox で実行したということでよろしいでしょうか。回答結果に記載した内容にコーディングミスが無いことを確認するために、回答結果の内容をコピー＆ペーストして実行しましたが、当方の環境では jQuery利用のコードも標準API利用のコードもどちらも、Chrome と Firefox の両方のブラウザでも問題無く動作します。 >何故シンタックスエラーとなるのかわかりませんが、記述先がPHPファイルのせいでしょうか？ >$optionsという変数？が消えてしまっているので。「記述先がPHPファイルのせい」と判断した理由は何でしょうか。 HTMLで同一のコードを実行した場合は問題無く動作するが、PHPにすると問題が発生するということでしょうか。 (つまり、PHPによって出力されたHTMLが意図したコードになっていないという意味でしょうか) また、「$optionsという変数？が消えてしまっている」と判断した理由は何でしょうか。変数 $options が undefined になっているということでしょうか。 (たとえば、console.log( $options ) の出力結果が undefined になっていたり、ブレークポイントで止めて $options を見ると undefined になっているということでしょうか) それとも、PHPで出力された結果のHTML上で「const $options = $('#user option');」の行が消えてしまっているという意味でしょうか。

kirin311

2018/10/10 00:12

返信ありがとうございます。使用ブラウザですが、まずはChromeで実行いたしました。「記述先がPHPファイルのせい」と判断した理由としては開発ツールにてソースを確認しましたところ const = $('#sel option'); となっており、$optionsが消えております。（そして動作しません。）これは、変数がPHPだから消えてしまっているのでは？と判断した次第です。私自身の予想であり、はっきりと確証を持ってるわけではないです。該当の開発ツール内容のSSを撮りましたので質問内容の加筆修正いたします。

crsh

2018/10/10 14:46

シンタックスエラーのスクリーンショットの提示ありがとうございます。 JavaScriptを<?php ～ ?>で囲った中に記述してしまっているということですね。 PHPは先頭が $ が先頭のものは、PHPの変数として識別されてしまうため、<?php ～ ?> で囲った中に JavaScript を記述した $options がPHPの変数として認識されてしまい、変数が展開されて消えてしまっているのが原因かと思います。 PHPが必要な箇所だけ<?php ～?>で囲った実装にすべきですが、それをやろうとすると保守対象の元々のコードの都合で全体のコードの改修になってしまうので難しい等あれば、とりあえずPHPの変数として認識されないように、$options や $option の変数名の先頭を $ではない物に変更すれば動作はするかと思います。 JavaScriptでは、$には特別な意味は無いので$を付けなくても問題ありません。・jQueryオブジェクトの変数・HTMLElementやNodeListなどのオブジェクトの変数を視覚的に区別するために、先頭に $ を付けているだけです。

kirin311

2018/10/11 00:13

そういうことでしたか。確かに<?php ～ ?>で囲った中にJavascriptを記述しております。 Javascriptに＄がなくても問題ないのですね。必要かと思って残しておりましたが$ が先頭を削除したところ、動作しませんでしたがconst全てをvarに変えたところ動作できるようになりました。ありがとうございました、無事解決しましたのでベストアンサーとつけさせていただきます。

行動規範の内容に同意します

JavaScript
1getValue[i] = $('#ge'+i).val();
2// 1回目の呼び出しでは、$('#ge'+i).val() ==> "./index.php?no=01"
3// 2回目の呼び出しでは、$('#ge'+i).val() ==> "./index.php?no=01&year=2018&month=10&day=01&view=month"
4// 3回目の呼び出しでは、$('#ge'+i).val() ==> "./index.php?no=01&year=2018&month=10&day=01&view=month&year=2018&month=11&day=01&view=month"
5// ...
6// なので、素朴な方法としては、次のコードを直後に追加すると解決するかもしれません。
7getValue[i] = getValue[i].split("&")[0];

投稿2018/09/29 08:19

takey

総合スコア312

kirin311

2018/10/05 04:57

すみません返事が遅くなりました、 getValue[i] = getValue[i].split("&")[0];を追加させていただいたところ ◆元が <option id="ge2" class="query" value="./index.php?no=1">名前１</option> ・・・ <option id="ge2" class="query" value="./index.php?no=60">名前６０</option> ◆変更後 <option id="ge2" class="query" value="./index.php?no=1">名前１</option> <option id="ge2" class="query" value="./index.php?no=1">名前２</option> ・・・ <option id="ge2" class="query" value="./index.php?no=1">名前６０</option> となります。説明不足ですいません、valueの後ろが長くならないようにあくまでクエリ―追加という形で行いたいので。。

行動規範の内容に同意します

今の書き方が、
① valueの値を取得する
② 値の後ろに日付を足す
③ 値をoption valueにセットする
になっているので、もちろんボタンを押す度にvalueの後ろが長くなります。

なので、値に「?」がついている場合はそこで区切ってみて一度index.phpだけのものにしてやる必要があります。

投稿2018/09/28 10:45

IshibashiTanaka

総合スコア152