ホームページ ウェブフロントエンド jsチュートリアル jsはselectドロップダウン_javascriptスキルで選択できない問題を解決します

jsはselectドロップダウン_javascriptスキルで選択できない問題を解決します

May 16, 2016 pm 04:34 PM
select 落ちる

マウスオーバー イベントで選択ドロップダウン ボックスが表示されると、選択ドロップダウン ボックスを選択できません。 解決策:

var o = e.popularTarget || e.toElement;//オプションに移動したときの判定で移動したオブジェクトはnull、つまりnull、Firefoxなどは未定義です。 。
if (!o) return; // 非表示にせずにオプションを終了します

完全なコード例は次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;border:0;}
.pop_blue{ position:absolute; cursor:pointer; padding:10px;}
.pop_blue span{ display:inline-block; width:24px; height:32px; background: url(../images/pop_blue.png) no-repeat;}

.map_xf .rud1{width:210px; position:absolute;border:1px solid #ddd; display:none; background-color:#fff;padding:17px 25px;}
.map_xf .rud1 li{margin:0 0 8px;}
.map_xf .rud1 input,.map_xf .rud1 select{height:22px;}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.pop_blue').hover(
function(){
$(this).find('.rud1').show();
$(this).css("z-index","9999");
},
function(e){
var o = e.relatedTarget || e.toElement;//判断下移动到的对象,移动到option上ie下是null,firefox等为undefined。。
if (!o) return;//为option退出不隐藏

$(this).find('.rud1').hide();
$(this).css("z-index","0");
}
)
})
</script>
</head>

<body>
<div style="position:relative;width:100px;height:100px">
<div class="pop_blue" style="top:0px; left:0;"> <span>鼠标移上</span><i></i>
<div class="rud1 font12" style="top:10px;left:40px; display:none;padding:50px;background:blue;">
<ul>
<li>
<select class="w100" id="dan">
<option value="选择单元" selected="">选择单元</option>
<option value="选择单元" selected="">选择单元1</option>
<option value="选择单元" selected="">选择单元2</option>
<option value="选择单元" selected="">选择单元3</option>
<option value="选择单元" selected="">选择单元4</option>
</select>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
ログイン後にコピー


マウスを上に移動すると、選択範囲は表示されなくなります。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jqueryでselect要素を非表示にする方法 jqueryでselect要素を非表示にする方法 Aug 15, 2023 pm 01:56 PM

jquery で select 要素を非表示にする方法: 1. hide() メソッド。jQuery ライブラリを HTML ページに導入します。さまざまなセレクターを使用して select 要素を非表示にできます。ID セレクターは、selectId を選択した select 要素の ID に置き換えます。実際に使用する; 2. css() メソッド、ID セレクターを使用して非表示にする必要がある select 要素を選択し、css() メソッドを使用して表示属性を none に設定し、selectId を select 要素の ID に置き換えます。

Select Channels Goの非同期処理方法 golangを使った並行プログラミング Select Channels Goの非同期処理方法 golangを使った並行プログラミング Sep 28, 2023 pm 05:27 PM

golang を使用した SelectChannelsGo 同時プログラミングの非同期処理方法 はじめに: 同時プログラミングは、アプリケーションのパフォーマンスと応答性を効果的に向上させることができる、現代のソフトウェア開発における重要な領域です。 Go 言語では、Channel と Select ステートメントを使用して同時プログラミングを簡単かつ効率的に実装できます。この記事では、SelectChannelsGo 同時プログラミングの非同期処理メソッドに golang を使用する方法を紹介し、具体的な方法を提供します。

jQueryで選択要素の変更イベントバインディングを実装する方法 jQueryで選択要素の変更イベントバインディングを実装する方法 Feb 23, 2024 pm 01:12 PM

jQuery は、DOM 操作、イベント処理、アニメーション効果などを簡素化するために使用できる人気のある JavaScript ライブラリです。 Web 開発では、選択した要素のイベント バインディングを変更する必要がある状況によく遭遇します。この記事では、jQuery を使用して選択要素変更イベントをバインドする方法を紹介し、具体的なコード例を示します。まず、ラベルを使用してオプションを含むドロップダウン メニューを作成する必要があります。

Linux が select を使用する理由は何ですか? Linux が select を使用する理由は何ですか? May 19, 2023 pm 03:07 PM

select を使用すると、開発者は複数のファイル バッファーを同時に待機できるため、IO 待機時間を短縮し、プロセスの IO 効率を向上させることができます。 select() 関数は、プログラムが複数のファイル記述子を監視し、監視されている 1 つ以上のファイル記述子が「準備完了」になるのを待機できるようにする IO 多重化関数です。いわゆる「準備完了」状態とは、ファイルを指します。記述子はブロックされなくなり、読み取り可能、書き込み可能、​​例外を含む特定の種類の IO 操作に使用できるようになりました。 select は、ヘッダー ファイル #include にあるコンピューター関数です。この関数は、ファイル記述子の変更 (読み取り、書き込み、または例外) を監視するために使用されます。 1. セレクト機能の概要 セレクト機能はIO多重化機能です。

mysqlのselect構文の使い方 mysqlのselect構文の使い方 Jun 01, 2023 pm 07:37 PM

1. SQL ステートメント内のキーワードは大文字と小文字を区別せず、SELECT は SELECT と同等、FROM は from と同等です。 2. users テーブルからすべての列を選択するには、記号 * を使用して列名を置き換えます。構文 -- これはコメントです -- FEOM で指定された [テーブル] から [すべての] データをクエリします * は [すべての列] を意味します SELECT*FROM -- 指定された [テーブル] から指定されたデータを FROM データからクエリします列名 (フィールド) SELECT 列名 FROM テーブル名 インスタンス -- 注: 複数の列を区切るには英語のカンマを使用してください。 selectusername、passwordfrom

選択チャネルの実装 golang による同時プログラミングのパフォーマンス最適化 選択チャネルの実装 golang による同時プログラミングのパフォーマンス最適化 Sep 27, 2023 pm 01:09 PM

golang による SelectChannels の実装 Go 同時プログラミングのパフォーマンスの最適化 Go 言語では、ゴルーチンとチャネルを使用して同時プログラミングを実装するのが非常に一般的です。複数のチャネルを扱う場合、通常は多重化に select ステートメントを使用します。ただし、大規模な同時実行の場合、select ステートメントを使用するとパフォーマンスが低下する可能性があります。この記事では、golang による select の実装をいくつか紹介します。

チャンネルを選択 Golang を使用して信頼性と堅牢性を実現する同時プログラミングを実行する チャンネルを選択 Golang を使用して信頼性と堅牢性を実現する同時プログラミングを実行する Sep 28, 2023 pm 05:37 PM

Golang を使用した信頼性と堅牢性のための SelectChannels 同時プログラミングの概要: 最新のソフトウェア開発では、同時実行性が非常に重要なトピックになっています。並行プログラミングを使用すると、プログラムの応答性が向上し、コンピューティング リソースがより効率的に利用され、大規模な並列コンピューティング タスクをより適切に処理できるようになります。 Golang は非常に強力な同時プログラミング言語であり、go コルーチンとチャネル メカニズムを通じて同時プログラミングを実装するためのシンプルかつ効果的な方法を提供します。

Excel の入力 1 ドロップダウン リストにすべて 1 が含まれるのはなぜですか? Excel のシリアル番号のドロップダウンは増加せず、すべて 1 つのソリューションです Excel の入力 1 ドロップダウン リストにすべて 1 が含まれるのはなぜですか? Excel のシリアル番号のドロップダウンは増加せず、すべて 1 つのソリューションです Mar 13, 2024 pm 09:01 PM

Excel の入力 1 ドロップダウン リストにすべて 1 が含まれるのはなぜですか? Excel スプレッドシートは私たちが日常の事務作業で使用するソフトウェアですが、多くのユーザーが自動入力を使用する場合、最初の値は 1 で、プルダウンしても 1 になると思います。このサイトでは、Excel のシリアル番号のドロップダウンが増加せず、すべて 1 になる問題の解決策をユーザーに詳しく紹介します。 Excel のシリアル番号ドロップダウンが増分せず、すべての数値が 1 になる場合の解決策。 1. Excel のドロップダウン リストに 1 を入力すると、すべての数値が 1 であることがわかります。この時点で、[自動入力] オプションをクリックできます。アイコン"。 2. 自動入力方法はセルをコピーするため、ドロップダウンがすべて 1 になる状況が発生します。 3.「順番に記入」にチェックを入れる

See all articles