Heim Web-Frontend js-Tutorial input+select(multiple) 实现下拉框输入值_javascript技巧

input+select(multiple) 实现下拉框输入值_javascript技巧

May 16, 2016 pm 06:52 PM
input select 下拉框

于是尝试了用input+select来实现,结果如下:

 

具体代码及演示地址:www.homdian.com/test.aspx

这种方法其实是在下拉框上压一个文本框,能够实现输入,也能够实现下拉框的选择。但根据输入值用用异步的方式绑定下拉框选项时,

无法展开下拉框,到网上找了段代码:

复制代码 代码如下:

document.form1.ddlMovName.focus();
var WshShell = new ActiveXObject("Wscript.Shell");
try{
WshShell.SendKeys("%{DOWN}");
}
catch(e){}
WshShell.Quit;

以上这段可以实现展开下拉框,但是会弹出如下提示(测试环境IE7)

感觉不友好,所以没有用。于是又尝试用input+select(multiple),效果如下:

具体代码及演示地址:www.homdian.com/test1.aspx

这种方法已基本满足我的需求,在此贴出,希望大家能够提供更好的方法。谢谢。

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein verstecktes Laravel-Eingabefeld So implementieren Sie ein verstecktes Laravel-Eingabefeld Dec 12, 2022 am 10:07 AM

So implementieren Sie das ausgeblendete Laravel-Eingabefeld: 1. Suchen und öffnen Sie die Blade-Vorlagendatei. 2. Verwenden Sie die method_field-Methode in der Blade-Vorlage, um ein ausgeblendetes Feld zu erstellen. ".

So kapseln Sie Eingabekomponenten und einheitliche Formulardaten in vue3 So kapseln Sie Eingabekomponenten und einheitliche Formulardaten in vue3 May 12, 2023 pm 03:58 PM

Vorbereitung Verwenden Sie vuecreateexample, um ein Projekt zu erstellen. Die Parameter lauten ungefähr wie folgt: Verwenden Sie native Eingaben, bei denen es sich hauptsächlich um Werte und Änderungen handelt. App.tsx lautet wie folgt: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//Wenn sich das Eingabefeld ändert, synchronisieren Sie die Daten constonInput =;return( )=>({

Asynchrone Verarbeitungsmethode von Select Channels Go zur gleichzeitigen Programmierung mit Golang Asynchrone Verarbeitungsmethode von Select Channels Go zur gleichzeitigen Programmierung mit Golang Sep 28, 2023 pm 05:27 PM

Asynchrone Verarbeitungsmethode der gleichzeitigen Programmierung von SelectChannelsGo mit Golang Einführung: Die gleichzeitige Programmierung ist ein wichtiger Bereich in der modernen Softwareentwicklung, der die Leistung und Reaktionsfähigkeit von Anwendungen effektiv verbessern kann. In der Go-Sprache kann die gleichzeitige Programmierung mithilfe von Channels- und Select-Anweisungen einfach und effizient implementiert werden. In diesem Artikel wird die Verwendung von Golang für die asynchrone Verarbeitungsmethode der gleichzeitigen Programmierung von SelectChannelsGo vorgestellt und spezifische Informationen bereitgestellt

So verbergen Sie das ausgewählte Element in jquery So verbergen Sie das ausgewählte Element in jquery Aug 15, 2023 pm 01:56 PM

So verbergen Sie das Select-Element in JQuery: 1. Methode hide (), fügen Sie die jQuery-Bibliothek in die HTML-Seite ein, Sie können verschiedene Selektoren verwenden, um das Select-Element auszublenden, der ID-Selektor ersetzt die SelectId durch die ID des von Ihnen ausgewählten Elements tatsächlich verwenden; 2. css()-Methode, verwenden Sie den ID-Selektor, um das ausgewählte Element auszuwählen, das ausgeblendet werden muss, verwenden Sie die css()-Methode, um das Anzeigeattribut auf „none“ zu setzen, und ersetzen Sie selectId durch die ID des ausgewählten Elements.

So implementieren Sie ein Dropdown-Feld mit Mehrfachauswahl in Vue So implementieren Sie ein Dropdown-Feld mit Mehrfachauswahl in Vue Nov 07, 2023 pm 02:09 PM

So implementieren Sie ein Dropdown-Feld mit Mehrfachauswahl in Vue. In der Vue-Entwicklung ist das Dropdown-Feld eine der häufigsten Formularkomponenten. Normalerweise verwenden wir Radio-Dropdown-Felder, um eine Option auszuwählen. Manchmal müssen wir jedoch ein Dropdown-Feld mit Mehrfachauswahl implementieren, damit Benutzer mehrere Optionen gleichzeitig auswählen können. In diesem Artikel stellen wir vor, wie man ein Mehrfachauswahl-Dropdown-Feld in Vue implementiert, und stellen spezifische Codebeispiele bereit. 1. Verwenden Sie die ElementUI-Komponentenbibliothek. ElementUI ist eine auf Vue basierende Desktop-Komponentenbibliothek, die eine umfangreiche Benutzeroberfläche bietet.

So implementieren Sie die Änderungsereignisbindung ausgewählter Elemente in jQuery So implementieren Sie die Änderungsereignisbindung ausgewählter Elemente in jQuery Feb 23, 2024 pm 01:12 PM

jQuery ist eine beliebte JavaScript-Bibliothek, die zur Vereinfachung der DOM-Manipulation, Ereignisbehandlung, Animationseffekte usw. verwendet werden kann. Bei der Webentwicklung stoßen wir häufig auf Situationen, in denen wir die Ereignisbindung für ausgewählte Elemente ändern müssen. In diesem Artikel wird erläutert, wie Sie mit jQuery ausgewählte Elementänderungsereignisse binden, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir ein Dropdown-Menü mit Optionen erstellen, die Beschriftungen verwenden:

Detaillierte Erläuterung der Eingabefeld-Bindungsereignisse in Vue-Dokumenten Detaillierte Erläuterung der Eingabefeld-Bindungsereignisse in Vue-Dokumenten Jun 21, 2023 am 08:12 AM

Vue.js ist ein leichtes JavaScript-Framework, das einfach zu verwenden, effizient und flexibel ist. Es ist derzeit eines der beliebtesten Front-End-Frameworks. In Vue.js sind Eingabefeld-Bindungsereignisse eine sehr häufige Anforderung. In diesem Artikel werden die Eingabefeld-Bindungsereignisse im Vue-Dokument ausführlich vorgestellt. 1. Grundkonzepte In Vue.js bezieht sich das Eingabefeld-Bindungsereignis auf die Bindung des Werts des Eingabefelds an das Datenobjekt der Vue-Instanz, wodurch eine bidirektionale Bindung von Eingabe und Antwort erreicht wird. In Vue.j

Was ist der Grund, warum Linux select verwendet? Was ist der Grund, warum Linux select verwendet? May 19, 2023 pm 03:07 PM

Da Select es Entwicklern ermöglicht, gleichzeitig auf mehrere Dateipuffer zu warten, kann dies die E/A-Wartezeit verkürzen und die E/A-Effizienz des Prozesses verbessern. Die Funktion select() ist eine E/A-Multiplexfunktion, die es dem Programm ermöglicht, mehrere Dateideskriptoren zu überwachen und darauf zu warten, dass einer oder mehrere der überwachten Dateideskriptoren „bereit“ werden. Bezieht sich auf: die Datei Der Deskriptor ist nicht mehr blockiert und kann für bestimmte Arten von E/A-Vorgängen verwendet werden, einschließlich lesbarer, beschreibbarer und Ausnahmen. select ist eine Computerfunktion, die sich in der Header-Datei #include befindet. Diese Funktion wird verwendet, um Dateideskriptoränderungen zu überwachen – Lesen, Schreiben oder Ausnahmen. 1. Einführung in die Auswahlfunktion Die Auswahlfunktion ist eine E/A-Multiplexfunktion.

See all articles