編集可能なドロップダウン ボックスを実装する 2 つの方法_JavaScript スキル
編集可能なドロップダウン ボックス - HTML
< div style="position:relative;">
🎜>
編集可能なドロップダウン ボックス - JS
title>/title>
| < select name=" fason"> |
this.obj=obj
this.name=select;
this.select=document.getElementsByName(select)
/*ドロップ変換対象のダウンボックス*/
}
/*初期化オブジェクト*/
combox.prototype.init=function(){
var inputbox="inputbox ="style='position:absolute;width:" (this.select.offsetWidth-16) ";height:" this.select .offsetHeight ";left:" getL(this.select) ";top:" getT(this.select) "'>"
document.write(inputbox)
with(this.select.style){
left=getL(this.select)
top=getT(this.select)
position="absolute"
clip="rect(0 " (this.select.offsetWidth) " " this .select.offsetHeight " " ( this.select.offsetWidth-18) ")"
/*ドロップダウン ボックスの切り取り*/
}
this.select.onchange=new Function(this.obj " .change()")
this.change()
}
/*初期化終了*/
////////オブジェクトイベント定義// /////
combox.prototype.find=function(){
/*入力ボックスの値が検索されると、ドロップダウン ボックスが自動的に配置されます*/
var inputbox=document .getElementsByName("combox_" this.name)[0]
with(this.select){
for(i=0;i
selectedIndex=i
this.change()
break;
}
}
} >combox.prototype.change=function(){
/ *ドロップダウン ボックスの onchange イベントを定義します*/
var inputbox=document.getElementsByName("combox_" this.name)[0]
inputbox.value=this.select.options[this.select.selectedIndex].text ;
with(inputbox){select();focus()}
}
////// //オブジェクトイベントの終了///////
/*パブリック位置決め関数 (コントロールの絶対座標を取得)*/
function getL(e){
var l=e.offsetLeft ;
while(e=e.offsetParent)l =e.offsetLeft;
return l
}
function getT(e){
var t=e.offsetTop; (e=e.offsetParent)t =e.offsetTop;
return t
}
/*End*/
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7621
15
1389
52
89
11
31
136
Vue を使用して編集可能なデータ テーブルを実装するにはどうすればよいですか?
Jun 25, 2023 pm 06:20 PM
フロントエンド テクノロジーの継続的な開発により、データ テーブルは企業管理とデータ表示のための重要なツールの 1 つになりました。日々の開発ではデータテーブルのデータを変更したり追加したりする必要が生じることがありますが、その際には編集可能なデータテーブルを実装する必要があります。この記事では、Vue を使用して編集可能なデータ テーブルを実装する方法を紹介します。 1. 実装のアイデア 編集可能なデータ テーブル機能を実装するときは、次の点を考慮する必要があります。 データのプレゼンテーション: 表示および編集のためにデータをテーブルにレンダリングします。テーブル編集: テーブル内のデータを編集します。
Vue で複数選択ドロップダウン ボックスを実装する方法
Nov 07, 2023 pm 02:09 PM
Vue で複数選択ドロップダウン ボックスを実装する方法 Vue 開発では、ドロップダウン ボックスは一般的なフォーム コンポーネントの 1 つです。通常、ラジオのドロップダウン ボックスを使用してオプションを選択します。ただし、ユーザーが同時に複数のオプションを選択できるように、複数選択ドロップダウン ボックスを実装する必要がある場合があります。この記事では、Vue で複数選択ドロップダウン ボックスを実装する方法と具体的なコード例を紹介します。 1. ElementUI コンポーネント ライブラリを使用する ElementUI は、リッチな UI を提供する Vue に基づくデスクトップ コンポーネント ライブラリです。
Layui を使用して編集可能な個人スケジュール管理システムを開発する方法
Oct 25, 2023 am 11:42 AM
Layui を使って編集機能をサポートした個人スケジュール管理システムを開発する方法 近年、情報技術の急速な発展と人々の生活のスピードの加速に伴い、個人のスケジュール管理の重要性がますます高まっています。ユーザーが自分の時間とタスクをより適切に管理できるようにするために、JavaScript ベースのフロントエンド UI フレームワークである Layui を使用できます。豊富なコンポーネントと簡潔なスタイルを提供し、個人のスケジュール管理システムの開発に非常に適しています。 1. 環境の準備 まずは開発環境を準備します。必ず確認してください
JavaScript を使用してドロップダウン ボックスのリンク効果を実現するにはどうすればよいですか?
Oct 20, 2023 pm 03:57 PM
JavaScript を使用してドロップダウン ボックスのリンク効果を実現するにはどうすればよいですか? Web ページの開発では、ドロップダウン ボックスのリンクは一般的なインタラクティブ効果です。 1 つのドロップダウン ボックスでオプションを選択すると、別のドロップダウン ボックスのオプションの内容が動的に変更され、2 つのドロップダウン ボックス間の連携が実現されます。この記事では、JavaScript を使用してドロップダウン ボックスの連動効果を実現する方法と、具体的なコード例を紹介します。 HTML 構造 まず、2 つのドロップダウン ボックスを作成し、それらに id 属性を追加して、JavaScr が
Vue モバイルのドロップダウン ボックスのスクロールの問題の解決策
Jun 29, 2023 pm 11:49 PM
Vue 開発におけるモバイル ドロップダウン ボックスのスクロール問題を解決する方法 モバイル端末の普及に伴い、ますます多くの Web アプリケーションがモバイル デバイス向けに開発され始めています。モバイル開発の過程では、モバイル デバイスのドロップダウン ボックスのスクロールの問題という問題によく遭遇します。従来の PC 側では、ドロップダウン ボックスのスクロールはブラウザのデフォルトのスクロール バーによって制御されますが、モバイル デバイスではスクロール バーがないため、ドロップダウン ボックスをスクロールできません。これにより、一部のシナリオでは、ユーザーがドロップダウン ボックスのすべてのオプションを選択できなくなる可能性があります。
Vueドキュメントでの編集可能なテーブルの実装方法
Jun 20, 2023 pm 06:43 PM
Vue.js は現在最も人気のあるフロントエンド フレームワークの 1 つであり、データ駆動型のアプローチを使用してユーザー インターフェイスを構築し、双方向のデータ バインディングとコンポーネント化の特徴を備えています。 Vue.jsのドキュメントには編集可能なテーブルを実装するメソッドが記載されており、この記事ではその具体的な実装手順を紹介します。データを準備するにはまずデータを用意する必要がありますが、ここでは生徒情報を例に説明します。データ形式は配列にすることができ、各要素には名前、性別、年齢などの属性が含まれます。生徒:[{名前:'シャオ・ミン
Layui を使用して編集可能なテーブル関数を実装する方法
Oct 25, 2023 am 11:27 AM
Layui を使用して編集可能なテーブル関数を実装する方法 Layui は、豊富なコンポーネントと強力な機能を備えた、古典的で簡潔なフロントエンド UI フレームワークです。 Layui を使用した開発プロセス中に、編集可能なテーブル関数を実装する必要が生じる場合があります。この記事では、Layui のテーブル コンポーネントとフォーム コンポーネントを使用して編集可能なテーブル関数を実装する方法と、具体的なコード例を紹介します。 1. Layui ライブラリの導入 まず、Layui ライブラリの関連ファイルをプロジェクトに導入します。選択できる
Layui を使用して編集機能をサポートする電子書籍リーダーを開発する方法
Oct 24, 2023 am 08:08 AM
Layui を使用して編集可能な電子書籍リーダーを開発する方法の概要: Layui は、豊富な UI コンポーネントと開発ツールのセットを提供する使いやすく強力なフロントエンド フレームワークで、開発者は美しく完全に機能するものを迅速に構築できます。ウェブアプリケーション。この記事では、Layui フレームワークを使用して編集機能をサポートする電子書籍リーダーを開発する方法を紹介します。これにより、ユーザーは電子書籍内でハイライト、マーク、メモなどの操作を実行できるようになります。ステップ 1: プロジェクトの準備 まず、基本的なプロジェクト構造を準備する必要があります。を作成します
