Q&A
「下記のコードの「onchange」の部分が問題ではないかと考えています。」とありますが、どうしてそう考えたのでしょうか。
js の onchangeで自動でリロードし続けてしまう
WordPressを使っています。
ニュースのページで、年号をドロップダウン にし、選択するとニュース一覧が選択した年に切り替わります。
現在、は動いていますが、デザインをいただいて、cssやjsを入れたところ、自動でリロードし続けるようになってしまいました。
下記のコードの「onchange」の部分が問題ではないかと考えています。
コード
<select class = "yearlydropdown minimal" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;"> <?php wp_get_archives( array( 'type' => 'yearly', 'format' => 'option', 'post_type' => 'news', 'posts_per_page' => 5) ); ?> </select>
やりたいこと
追加したcssやjsをそのままで、上記のプログラムを修正して、自動にリロードしないようにできないでしょうか。
追記 CSS
.hoge-custom-select-wrap { max-width: 152px; width: 100%; } .hoge-custom-select-wrap * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .hoge-custom-select { display: none; } .hoge-custom-select-main { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; cursor: pointer; } @media screen and (min-width: 768px) { .hoge-custom-select { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; } .hoge-custom-select-main { display: none; } } .hoge-custom-select-main select { text-align: left; opacity: 1; width: 100%; max-height: 24px; padding: 0 0 0 45px; background-color: #fff; color: #000; border: 1px solid #000; border-radius: 0; font-size: 16px !important; -moz-appearance: none; appearance: none; -webkit-appearance: none; } .hoge-custom-select__icon { position: absolute; right: 0; top: 0; width: 22px; height: 100%; background-color: #eee; border: 1px solid #000; } .hoge-custom-select-main > .hoge-custom-select__icon { pointer-events: none; } .hoge-custom-select__icon::after { position: absolute; right: 1px; top: 50%; -webkit-transform: translate(-2px, -50%); transform: translate(-2px, -50%); content: ''; width: 0; height: 0; padding: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #2e2e2e; } .hoge-custom-select__box { position: relative; width: 100%; max-width: 130px; text-align: center; background-color: #fff; } .hoge-custom-select__item { border: 1px solid #000; border-right: 0; height: 24px; } .hoge-custom-select__menu { position: absolute; top: 24px; left: 0; z-index: 10; display: none; width: 100%; max-height: 145px; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; background-color: #fff; border: 1px solid #ccc; border-top: 0; } .hoge-custom-select__menu::-webkit-scrollbar { display: none; } .hoge-custom-select__menu.active { display: block; } .hoge-custom-select__menu-item { padding: 4px 0; } .hoge-custom-select__menu-item.active { background-color: #000; color: #fff; cursor: auto; } .hoge-custom-select__menu-item:not(:first-child):hover { background-color: #eee; } /*# sourceMappingURL=scss-sourcemaps/global.css.map */
追記 js
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["global"],{ /***/ "./src/js/global.js": /*!**************************!*\ !*** ./src/js/global.js ***! **************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { eval("/* WEBPACK VAR INJECTION */(function($) {function hogeCustomSelect(elem) {\n $(function () {\n var copySelect = function copySelect($select, $dest) {\n $select = $($select), $dest = $($dest);\n $dest.empty();\n $select.children('option').each(function () {\n $dest.append('<div class=\"hoge-custom-select__menu-item\" value=\"' + $(this).val() + '\">' + $(this).html() + '</div>');\n });\n };\n var bindActive = function bindActive($select, $dest, direction) {\n $select = $($select), $dest = $($dest);\n if (direction === '>') {\n var val = $select.val();\n $dest.children().removeClass('active');\n $dest.find('[value=\"' + val + '\"]').addClass('active');\n } else if (direction === '<') {\n var _val = $dest.children('.active').attr('value');\n $select.val(_val);\n }\n };\n var sortItems = function sortItems($dest) {\n $dest = $($dest);\n var $items = $dest.children();\n $dest.html($items.sort(function (a, b) {\n if ($(a).hasClass('active')) return -1;\n return parseInt($(a).attr('value')) - parseInt($(b).attr('value'));\n }));\n };\n var $wrap = $(elem);\n $wrap.each(function () {\n var $select = $(this).children('select');\n var $frame = $('<div class=\"hoge-custom-select\">\n <div class=\"hoge-custom-select__box\">\n <div class=\"hoge-custom-select__item js--toggle-menu-button\"></div>\n <div class=\"hoge-custom-select__menu\"></div>\n </div>\n <span class=\"hoge-custom-select__icon js--toggle-menu-button\"></span>\n </div>');\n var $menu = $frame.find('.hoge-custom-select__menu');\n $(this).after($frame);\n copySelect($(this).children('select'), $menu);\n $select.on('change', function () {\n bindActive($select, $menu, '>');\n sortItems($menu);\n $frame.find('.hoge-custom-select__item').empty().html($menu.find('.active').html());\n });\n var self = this;\n $menu.on('click', '>*', function () {\n var current_val = $menu.children('.active').attr('value');\n var val = $(this).attr('value');\n if (current_val !== val) {\n $menu.children().removeClass('active');\n $(this).addClass('active');\n sortItems($menu);\n bindActive($select, $menu, '<');\n $frame.find('.hoge-custom-select__item').empty().html($menu.find('.active').html());\n $select.trigger('change');\n }\n $menu.toggle(false);\n sortItems($menu);\n });\n $select.trigger('change');\n $frame.find('.js--toggle-menu-button').click(function () {\n $menu.toggle();\n });\n });\n });\n}\n\nhogeCustomSelect('.hoge-custom-select-main');\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/js/global.js?"); /***/ }), /***/ 11: /*!********************************!*\ !*** multi ./src/js/global.js ***! ********************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { eval("module.exports = __webpack_require__(/*! ./src/js/global.js */\"./src/js/global.js\");\n\n\n//# sourceURL=webpack:///multi_./src/js/global.js?"); /***/ }) },[[11,"manifest","common"]]]);
追記 jsとcssは変更しない
他のドロップダウンでもこちらのjsとcssを使っているため、上記のjsとcssは変更しない方法で解決したいと考えています。
今回のはじめのプログラムのみ自動でリロードしてしまう状況です。
追記 css と js を読み込むdivも入れたコードです。
<div class="hoge-custom-select-wrap"> <div class="hoge-custom-select-main"> <select class = "yearlydropdown minimal" name="archive-dropdown" onclick ="document.location.href=this.options[this.selectedIndex].value;"> <?php wp_get_archives( array( 'type' => 'yearly', 'format' => 'option', 'post_type' => 'news', 'posts_per_page' => 5) ); ?> </select> </div> </div>
追記 このパターンのドロップダウン は動きます。
<div class="hoge-custom-select-wrap"> <div class="hoge-custom-select-main"> <select type="text" name="location" id="s"> <option value="">テスト</option> <option value="">テスト</option> <option value="">テスト</option> <option value="">テスト</option> </select> </div> </div>
「追加したcssやjs」は具体的にどのような物でしょうか。質問文に追記してください。
自動的にリロードするようにはなっていないように見受けられます。あくまでonchangeのタイミングです
「追加したcssやjs」 を質問文に追記致しました。
＞「下記のコードの「onchange」の部分が問題ではないかと考えています。」とありますが、どうしてそう考えたのでしょうか。
についてのご返信です。
CSSとJSをいただいた方に、「onchange」が問題の可能性があると言われたので。
ですが、今考えると、ここが問題ではないかもしれません。
回答2件
0
追加jsに$select.trigger('change'); があるのでonchangeが実行されると思います。
そのコードを書いた人に、onchange属性を考慮した書き方に改修してもらうなどしてください。
もしくは、onchange属性の内容を「追加js」に入れてもらい、onchange属性を削除しましょう。
投稿2019/10/10 02:49
総合スコア69596
0
isTrusted プロパティをみてはどうでしょうか？
https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
投稿2019/10/11 09:47
総合スコア13749
あなたの回答
tips
プレビュー
