常連

不明点があり、再度お世話になります。


#前提・実現したいこと
・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まで変わってしまうので解決にはなっていませんでした・・
◆追加後
<option class="query" value="./index.php?no=1">名前１</option>
<option class="query" value="./index.php?no=1">名前２</option>

・
・
・
<option class="query" value="./index.php?no=1">名前６０</option>


### コメントへの返信
コメント欄には入力しづらいため、こちらに記述します。

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（月、週、日のどのページに飛ぶか）

以上の全てになります。

![イメージ説明](b5442a4c3dccad7e90ca1b704e8acffd.jpeg)



> 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様へ開発ツール該当のシンタックスエラー
![イメージ説明](ddba91bd027d5a4df1aaa4454d5def08.png)

↑ご覧通り、$optionsが消えてしまっています。
黄色になっているところ以外にも消えている個所があります・・

※標準APIの方はシンタックスエラーがありませんでした。

SELECTボックスの値取得して、jQueryで利用

今回react-lazyloadというパッケージの型定義ファイルを作りました。
型定義ファイル自作時のおく場所に関して相談させて下さい

tsconfigを以下のように記載してます

```js:tsconfig.js
"compilerOptions": {
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "jsx": "react",
    "rootDir": "src",
    //一部省略
    "traceResolution": true,
    "typeRoots" : ["./mytypes","./node_modules/@types"]
  },
```

上記のようにtypeRootsに自作した定義ファイルを置く場所を作り以下のように格納しました。

```
<sampleproject>/mytypes/react-lazyload/index.d.ts
```

更にtraceResolutionをtrueに設定して

``tsc  | grep react-lazyload ``を実行すると

```
esolving real path for ‘xxxx/mytypes/react-lazyload/index.d.ts', result ‘xxxx/mytypes/react-lazyload/index.d.ts'.
======== Type reference directive 'react-lazyload' was successfully resolved to ‘xxxx/mytypes/react-lazyload/index.d.ts', primary: true. ========

```
という風にちゃんと解決したようにみえるのですが

最終的に以下のようなエラーが出ます
```
src/App.tsx(3,22): error TS7016: Could not find a declaration file for module 'react-lazyload'. 
'xxxx/node_modules/react-lazyload/lib/index.js' implicitly has an 'any' type.
```

また自作ファイル自体を疑いましたが自作した定義ファイルを
```
xxxx/node_modules/@types/react-lazyload/index.d.ts
```
に格納するとエラーが出ず上手く動作します。

どこか手順が間違えているのでしょうか？ご教授お願い致します。