先日質問させていただいた、selectタグのoptionを動的に生成する件について追加で質問させてください。
(全体のコードは最下部に記載しています)
HTML
1<select name="test" id="test"></select> 2<input type="text" id="input"> 3<input type="button" id="add" value="追加">
というプルダウンのフォームにjQueryで選択肢を動的に追加しようと思います。
このコードに対して、
JavaScript
1var input = $("#input").val(); 2 3$("#test").append( 4 `<option value="${input}" selected>${input}</option>` 5); 6
↑ではxssの標的になるため、textContent
やsetAttribute
を使いましょう、とアドバイスをいただきました。
その点を踏まえて考えてみたのですが、以下で止まってしまいました。。
JavaScript
1var input = $("#input").val(); 2 3$("#test").append("<option></option>"); 4var option = (appendで追加したoptionを取得) 5$(追加したoption).textContent(`${input}`); 6$(追加したoption).setAttribute("value", `"${input}"`); 7
質問
- 流れは上記で問題ないでしょうか?
- (appendで追加したoption)はどのように取得すればいいでしょうか?
- (面倒でなければ) 追加するたびに新しい方にselectedをつけかえるにはどうしたらいいでしょうか?
- (面倒でなければ) selectedがついたものをブラウザをリロードしても保持するためにはどうしたらいいでしょうか?
1.2だけでもものすごく助かります。
3はoptionを取得さえできれば自分でできる気がします。
長々と申し訳ありません、何卒よろしくお願い致します。
※全体のコード
JavaScript
1<select name="test"id="test"></select> 2 <input type="text" id="input"> 3 <input type="button" id="add" value="追加"> 4 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 6 <script> 7 var key = 'some-select'; 8 $(function() { 9 // 「追加」ボタンでlocalStorage/selectに追加 10 $("#add").click(function() { 11 var input = $("#input").val(); 12 var storedArr = JSON.parse(localStorage.getItem(key) || '[]'); 13 storedArr.push(input); 14 localStorage.setItem(key, JSON.stringify(storedArr)); 15 16 17 $("#test").append( 18 `<option value="${input}" selected>${input}</option>` 19 ); 20 }); 21 22 // localStorageに保存したデータをoptionに表示 23 var keys = JSON.parse(localStorage.getItem(key) || '[]'); 24 for(i = 0; i < keys.length; i++) { 25 var selectTag = document.getElementById("test"); 26 selectTag.insertAdjacentHTML( 27 "beforeend", 28 `<option value="${keys[i]}">${keys[i]}</option>` 29 ); 30 } 31 }); 32 </script>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/30 08:46
退会済みユーザー
2019/07/30 08:51 編集
2019/07/30 08:52