web-dev-qa-db-ja.com

選択リストの<option>にカーソルを合わせる

選択リストのオプションにカーソルを合わせると説明を表示しようとしていますが、カーソルを合わせるとコードが認識されません。

関連コード：

フォームのチャンクを選択：

<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>

選択の操作（以前に定義された配列）：

function rankFeatures(create) {

    var $optionList = $("#optionList");
    var $ranks = $("#ranks");

if(create == true) {
    for(i=0; i<5; i++){
        $optionList.append(features[i]);
    };
}
else {
    var index = $optionList.val();
    $('#optionList option:selected').remove();
    $ranks.append(features[index]);
};

}

これはすべて機能します。オプションにカーソルを合わせようとすると、すべてがバラバラになります。

$(document).ready( 

function (event) {
$('select').hover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

Stack Exchangeを検索しているときにそのコードを見つけましたが、それを機能させることができません。オプションをクリックするとアラートが発生します。マウスを動かさずにEnterキーを押してアラートを閉じないと、そのアラートは消えます。マウスで閉じると、2番目のアラートウィンドウがポップアップします。選択範囲内でマウスを動かすだけで、アラートボックスがポップアップすることがあります。オプションを直接ターゲットにしようとしましたが、ほとんど成功していません。オプションにカーソルを合わせると、アラートがポップアップ表示されるようにするにはどうすればよいですか？

読んでくれてありがとう！

javascriptjqueryformsoption
11
mattmattmatt

mouseenter イベントを使用できます。

また、要素がoptionであるかどうかを確認するために、このすべてのコードを使用する必要はありません。

.on() 構文を使用して、select要素に委任するだけです。

$(document).ready(function(event) {
    $('select').on('mouseenter','option',function(e) {
        alert('yeah');
        // this refers to the option so you can do this.value if you need..
    });
});

http://jsfiddle.net/AjfE8/ でのデモ

11
Gabriele Petrioli

簡単にしたい場合は、カスタマイズされたバリアントを選択することをお勧めします

  • ホバーイベントをキャプチャする
  • ホバー色を変更する
  • 「ドロップダウン」ビューと「すべてのアイテム」ビューで同じ動作

プラスあなたが持つことができます

  • サイズ変更可能なリスト
  • 単一選択モードと複数選択モード間の個別切り替え
  • より個別のCSS-ING
  • オプションアイテムの複数行

添付のサンプルをご覧ください。

$(document).ready(function() {
  $('.custopt').addClass('liunsel');


  $(".custopt, .custcont").on("mouseover", function(e) {
    if ($(this).attr("id") == "crnk") {
      $("#ranks").css("display", "block")
    } else {
      $(this).addClass("lihover");
    }
  })

  $(".custopt, .custcont").on("mouseout", function(e) {
    if ($(this).attr("id") == "crnk") {
      $("#ranks").css("display", "none")
    } else {
      $(this).removeClass("lihover");
    }
  })

  $(".custopt").on("click", function(e) {
    $(".custopt").removeClass("lihover");
    if ($("#btsm").val() == "ssm") {
      //single select mode
      $(".custopt").removeClass("lisel");
      $(".custopt").addClass("liunsel");
      $(this).removeClass("liunsel");
      $(this).addClass("lisel");
    } else if ($("#btsm").val() == "msm") {
      //multiple select mode
      if ($(this).is(".lisel")) {
        $(this).addClass("liunsel");
        $(this).removeClass("lisel");
      } else {
        $(this).addClass("lisel");
        $(this).removeClass("liunsel");
      }
    }
    updCustHead();
  });

  $(".custbtn").on("click", function() {
    if ($(this).val() == "ssm") {
      $(this).val("msm");
      $(this).text("switch to single-select mode")
    } else {
      $(this).val("ssm");
      $(this).text("switch to multi-select mode")
      $(".custopt").removeClass("lisel");
      $(".custopt").addClass("liunsel");
    }
    updCustHead();
  });

  function updCustHead() {
    if ($("#btsm").val() == "ssm") {
      if ($(".lisel").length <= 0) {
        $("#hrnk").text("current selected option");
      } else {
        $("#hrnk").text($(".lisel").text());
      }
    } else {
      var numopt = +$(".lisel").length,
        allopt =  $(".custopt").length;
      $("#hrnk").text(numopt + " of " + allopt + " selected option" + (allopt > 1 || numopt === 0 ? 's' : ''));
    }
  }
});
body {
  text-align: center;
}

.lisel {
  background-color: yellow;
}

.liunsel {
  background-color: lightgray;
}

.lihover {
  background-color: coral;
}

.custopt {
  margin: .2em 0 .2em 0;
  padding: .1em .3em .1em .3em;
  text-align: left;
  font-size: .7em;
  border-radius: .4em;
}

.custlist,
.custhead {
  width: 100%;
  text-align: left;
  padding: .1em;
  border: LightSeaGreen solid .2em;
  border-radius: .4em;
  height: 4em;
  overflow-y: auto;
  resize: vertical;
  user-select: none;
}

.custlist {
  display: none;
  cursor: pointer;
}

.custhead {
  resize: none;
  height: 2.2em;
  font-size: .7em;
  padding: .1em .4em .1em .4em;
  margin-bottom: -.2em;
  width: 95%;
}

.custcont {
  width: 7em;
  padding: .5em 1em .6em .5em;
  /* border: blue solid .2em; */
  margin: 1em auto 1em auto;
}

.custbtn {
  font-size: .7em;
  width: 105%;
}

h3 {
  margin: 1em 0 .5em .3em;
  font-weight: bold;
  font-size: 1em;
}

ul {
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>
  customized selectable, hoverable resizeable dropdown with multi-line, single-selection and multiple-selection support
</h3>
<div id="crnk" class="custcont">
  <div>
    <button id="btsm" class="custbtn" value="ssm">switch to multi-select mode</button>
  </div>
  <div id="hrnk" class="custhead">
    current selected option
  </div>
  <ul id="ranks" class="custlist">
    <li class="custopt">option one</li>
    <li class="custopt">option two</li>
    <li class="custopt">another third long option</li>
    <li class="custopt">another fourth long option</li>
  </ul>
</div>
0
woodz

マウスオーバーで試してください。それは私のために働いています。ホバーは、フォーカスがオプションリストから出たときにのみ機能します（mouseoutなど）。

function (event) {
$('select').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})
0
kjana83

必要なのは、selectではなくoption要素でホバーイベントを検出することです。

$(document).ready( 

    function (event) {
    $('#optionList option').hover(function(e) {
        console.log(e.target);
    });
})​
0
Gael

関数にラップインする必要はありません。このように機能させることはできませんでした。それを取り出すときは完璧に機能します。 マウスオーバー も使用されます。これは、ターゲットを離れるときに ホバー が実行されるためです。

$('option').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        console.log('yeah!');
    };
})​

それが機能しているのを見てフィドル。それをコンソールに変更して、アラートが大量に送信されないようにしました。 http://jsfiddle.net/HMDqb/

0
Bankzilla

同じ問題がありますが、解決策がどれも機能していません。

$("select").on('mouseenter','option',function(e) {
  $("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
  $("#show-me").hide();
});

$("option").mouseover(function(e) {
  var $target = $(e.target);
  if($target.is('option')) {
    alert('yeah!');
  };
});

ここに私のjsfiddle https://jsfiddle.net/ajg99wsm/

0
John Nguyen