Q&A
前提・実現したいこと
Wordpressでプルダウンメニューをリンクメニューにしたい。
発生している問題・エラーメッセージ
別々に試すとそれぞれ機能するコードを一緒にすると動かなくなってしまう。
該当のソースコード
**プルダウンメニューのコード** ### 【html】 <select name="sources" id="sources" class="custom-select sources" placeholder="すべて"> <option value="https://www.yahoo.co.jp/">レポート</option> <option value="https://www.yahoo.co.jp/">イベント</option> <option value="https://www.yahoo.co.jp/">ニュース</option> <option value="https://www.yahoo.co.jp/">その他</option> </select> ### 【CSS】 .custom-select-wrapper { position: relative; display: inline-block; user-select: none; } .custom-select-wrapper select { display: none; } .custom-select { position: relative; display: inline-block; } .custom-select-trigger { position: relative; display: block; width: 300px; padding: 0 84px 0 84px; box-sizing: border-box; font-size: 20px; font-weight: bold; border-bottom:1px solid #360000; color: #360000; line-height: 60px; cursor: pointer; } .custom-select-trigger:after { position: absolute; display: block; content: ''; width: 10px; height: 10px; top: 50%; right: 25px; margin-top: -3px; border-bottom: 2px solid #bb9b1d; border-right: 2px solid #bb9b1d; transform: rotate(45deg) translateY(-50%); transition: all .4s ease-in-out; transform-origin: 50% 0; } .custom-select.opened .custom-select-trigger:after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); } .custom-options { position: absolute; display: block; top: 100%; left: 0; right: 0; min-width: 100%; margin: -1px 0; border: 1px solid #b5b5b5; border-bottom: none; box-sizing: border-box; border-radius: 0 0 4px 4px; background: #fff; transition: all .4s ease-in-out; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-15px); z-index: 9; font-weight:normal; } .custom-select.opened .custom-options { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); } .custom-option { position: relative; display: block; padding: 0 22px; border-bottom: 1px solid #b5b5b5; font-size: 18px; font-weight: 100; color: #b5b5b5; line-height: 47px; cursor: pointer; transition: all .4s ease-in-out; } .option-hover:before { background: #f9f9f9; } .custom-option:hover, .custom-option.selection { background: #f9f9f9; } 【jQuery】 jQuery(function(){ jQuery(".custom-select").each(function() { var classes = jQuery(this).attr("class"), id = jQuery(this).attr("id"), name = jQuery(this).attr("name"); var template = '<div class="' + classes + '">'; template += '<span class="custom-select-trigger">' + jQuery(this).attr("placeholder") + '</span>'; template += '<div class="custom-options">'; jQuery(this).find("option").each(function() { template += '<span class="custom-option ' + jQuery(this).attr("class") + '" data-value="' + jQuery(this).attr("value") + '">' + jQuery(this).html() + '</span>'; }); template += '</div></div>'; jQuery(this).wrap('<div class="custom-select-wrapper"></div>'); jQuery(this).hide(); jQuery(this).after(template); }); jQuery(".custom-option:first-of-type").hover(function() { jQuery(this).parents(".custom-options").addClass("option-hover"); }, function() { jQuery(this).parents(".custom-options").removeClass("option-hover"); }); jQuery(".custom-select-trigger").on("click", function() { jQuery('html').one('click',function() { jQuery(".custom-select").removeClass("opened"); }); jQuery(this).parents(".custom-select").toggleClass("opened"); event.stopPropagation(); }); jQuery(".custom-option").on("click", function() { jQuery(this).parents(".custom-select-wrapper").find("select").val(jQuery(this).data("value")); jQuery(this).parents(".custom-options").find(".custom-option").removeClass("selection"); jQuery(this).addClass("selection"); jQuery(this).parents(".custom-select").removeClass("opened"); jQuery(this).parents(".custom-select").find(".custom-select-trigger").text(jQuery(this).text()); }); }); jQuery(function(){ const selected = $("select[name=sources]"); selected.on('change', function(){ window.location.href = selected.val(); }); });
おそらく
jQuery(function(){ const selected = $("select[name=sources]"); selected.on('change', function(){ window.location.href = selected.val(); }); });
の位置が違うのだと思うのですが、
コピペで作っているので全く見当がつかず…
試したこと
下記URLに上記CSS・JSを組み込む方向で考えておりました。
しかし、組み込んだ時点で動かなくなるので、
onChange="location.href=value;"の部分をjQueryで書くことにしました。
<select name="select" onChange="location.href=value;"> <option value="#">ページを選択してください</option> <option value="aaaaa.html">AAAAA</option> <option value="bbbbb.html">BBBBB</option> <option value="ccccc.html">CCCCC</option> <option value="ddddd.html">DDDDD</option> <option value="eeeee.html">EEEEE</option> </select>
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
これでいけると思いますよ^^
html
1<select name="select" onChange="location.href=this.value;"> 2 <option value="#">ページを選択してください</option> 3 <option value="aaaaa.html">AAAAA</option> 4 <option value="bbbbb.html">BBBBB</option> 5 <option value="ccccc.html">CCCCC</option> 6 <option value="ddddd.html">DDDDD</option> 7 <option value="eeeee.html">EEEEE</option> 8</select>
event属性に対してthisを入れると、event要素を取得できるので、その要素に対してのvalueを取得する必要があります。
jQueryの内容を再現してみました。
現状だと、value値を変更するだけだとchangeイベントは発火しないので、以下を適した場所に入れるといいかも知れません。
javascript
1$("select[name=sources]").trigger('change')
投稿2021/06/14 12:26
編集2021/06/14 13:17
総合スコア497
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/14 13:43
2021/06/14 14:10 編集
2021/06/14 14:12
2021/06/14 14:20
2021/06/14 15:28