Q&A
動画までつけていただきありがとうございます！！
大変お手数をお掛けいたしました...
無事解決できました！ありがとうございます！！
location hrefなどで、URL/アンカーリンクをとする方法などあればご教示いただけますでしょうか。
HTML
<input type="text" list="keywords"onChange="location.href='ハッシュ';"> <datalist id="keywords"> <option value="りんご"></option> <option value="ばなな"></option> <option value="めろん"></option> <option value="ぶどう"></option> <option value="みかん"></option> </datalist> <p id="a">りんご</p> <p id="b">ばなな</p> <p id="c">めろん</p> <p id="d">ぶどう</p> <p id="e">みかん</p>
- inputでデータリストの中から選択された valueのアンカーリンクに飛ばしたい
(動的にアンカーリンクを変更したい） - 同ページのid(#)にスクロール(遷移）させたい
大変お手数をお掛けいたしますがご教示いただけますでしょうか。
何卒よろしくお願い申し上げます。
回答2件
0
ベストアンサー
各optionタグに遷移先の情報が無いので、data-id属性（data-***属性なら名前は何でも良いです）を追加してあげる必要がありそうです。
onChangeイベント時に、inputタグに入っている値とoptionタグの各値を比較して、一致しているものがあればlocation.href = data-idの中身でスクロールさせればOKです。
（margin-bottom:1000pxは検証用に入れています）
<input type="text" list="keywords" onChange="scroll_selected()"> <datalist id="keywords"> <option data-id="a" value="りんご"></option> <option data-id="b" value="ばなな"></option> <option data-id="c" value="めろん"></option> <option data-id="d" value="ぶどう"></option> <option data-id="e" value="みかん"></option> </datalist> <p id="a" style="margin-bottom:1000px">りんご</p> <p id="b" style="margin-bottom:1000px">ばなな</p> <p id="c" style="margin-bottom:1000px">めろん</p> <p id="d" style="margin-bottom:1000px">ぶどう</p> <p id="e" style="margin-bottom:1000px">みかん</p> <script> var scroll_selected = function() { // 入力値 var value = event.target.value; // datalistのoption配列 var options = event.target.list.options; for (var i = 0; i < options.length; i++) { if (options[i].value == value) { // 一致するものを探してスクロール location.href = '#' + options[i].getAttribute('data-id'); return; } } } </script>
投稿2019/06/01 11:20
総合スコア107
0
こんな感じですか？
動画リンク
もしこれでよろしければ以下のコードを参考にしてください
location.html
html
1<head> 2 <script src="location.js"></script> 3</head> 4 5<body> 6 <select onchange=handleChangeHref(event)> 7 <option disabled selected value> -- select an option -- </option> 8 <option value="a">りんご</option> 9 <option value="b">バナナ</option> 10 <option value="c">メロン</option> 11 <option value="d">ぶどう</option> 12 <option value="e">みかん</option> 13 </select> 14 15 <p id="a">りんご</p> 16 <p id="b">ばなな</p> 17 <p id="c">めろん</p> 18 <p id="d">ぶどう</p> 19 <p id="e">みかん</p> 20</body>
location.js
js
1const handleChangeHref = function(e){ 2 const id = e.target.value; 3 console.log(id); 4}
投稿2019/06/01 11:12
総合スコア112
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/01 13:06