下記のコードは、HTMLのリストボックスと、リストボックスの初期選択値を与えるJavaScriptのコードです。
JavaScriptコード内で、下記のようなコードがあります。
if(foods.indexOf(opt.value) > -1){ opt.selected = true; }
この-1がないまま処理を進めた場合、再読み込みして初期値として選択されていたのは
餃子、焼肉でした。-1を抜くと何故ラーメンの選択がなかったことになるのでしょうか。
また、何故引数に餃子を与えていないのに、餃子が選択されたことになっているのでしょうか。
indexOfメソッドは、検索しても存在しない場合は、-1を返すというところまでは理解しています。
初学者の為、できるだけわかりやすく教えていただけますと幸いです。
よろしくお願い致します。
-- HTML --
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>練習サイト</title> </head> <body> <form> <div> 好きな食べ物は : <select id="food" multiple> <option value="ラーメン">ラーメン</option> <option value="餃子">餃子</option> <option value="焼肉">焼肉</option> </select> <input id="btn" type="button" value="送信"> </div> </form> <script src="index.js"></script> </body> </html>
-- JavaScript --
'use strict'; let set_Listbox_Value = (foods) => { let opts = document.getElementById('food').options; for(let i=0,len=opts.length; i < len; i++){ let opt = opts[i]; if(foods.indexOf(opt.value) > -1){ // > -1とすれば、正しい選択がされることはわかります opt.selected = true; } } }; document.addEventListener('DOMContentLoaded',set_Listbox_Value(['ラーメン','焼肉']),false);
あなたの回答
tips
プレビュー