質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.35%

Java Script の onchangeで自動でリロードし続けてしまう

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,397

score 27

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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/10/10 11:36

    自動的にリロードするようにはなっていないように見受けられます。あくまでonchangeのタイミングです

    キャンセル

  • ichigob

    2019/10/10 11:40

    「追加したcssやjs」 を質問文に追記致しました。

    キャンセル

  • ichigob

    2019/10/10 11:42

    >「下記のコードの「onchange」の部分が問題ではないかと考えています。」とありますが、どうしてそう考えたのでしょうか。

    についてのご返信です。

    CSSとJSをいただいた方に、「onchange」が問題の可能性があると言われたので。

    ですが、今考えると、ここが問題ではないかもしれません。

    キャンセル

回答 2

+1

追加jsに$select.trigger('change'); があるのでonchangeが実行されると思います。
そのコードを書いた人に、onchange属性を考慮した書き方に改修してもらうなどしてください。
もしくは、onchange属性の内容を「追加js」に入れてもらい、onchange属性を削除しましょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/10 11:57

    あなたに書き直せないならそうするしかないと思います。

    キャンセル

  • 2019/10/11 09:23

    onchange 以外のもので解決はできませんでしょうか?

    キャンセル

  • 2019/10/11 18:21

    「onchange 以外のもの」とは?

    キャンセル

0

isTrusted プロパティをみてはどうでしょうか?
https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る