首頁 web前端 js教程 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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1242
24
laravel input隱藏域怎麼實現 laravel input隱藏域怎麼實現 Dec 12, 2022 am 10:07 AM

laravel input隱藏域的實作方法:1、找到並開啟Blade模板檔案;2、在Blade模板中使用method_field方法來建立隱藏域,其建立語法為「{{ method_field('DELETE') }}」。

vue3怎麼封裝input元件和統一表單數據 vue3怎麼封裝input元件和統一表單數據 May 12, 2023 pm 03:58 PM

準備工作用vuecreateexample建立項目,參數大概如下:用原生input原生的input,主要是value和change,資料在change的時候需要同步。 App.tsx如下:import{ref}from'vue';exportdefault{setup(){//username就是資料constusername=ref('張三');//輸入框變化的時候,同步資料constonInput=;return( )=>({

jquery如何隱藏select元素 jquery如何隱藏select元素 Aug 15, 2023 pm 01:56 PM

jquery隱藏select元素的方法:1、hide()方法,在HTML頁面中引入jQuery庫,可以使用不同選擇器來隱藏select元素,ID選擇器將selectId替換為你實際使用的select元素的ID;2、 css()方法,使用ID選擇器選擇需要隱藏的select元素,使用css()方法將display屬性設為none,並將selectId替換為select元素的ID。

使用golang進行Select Channels Go並發式程式設計的非同步處理方法 使用golang進行Select Channels Go並發式程式設計的非同步處理方法 Sep 28, 2023 pm 05:27 PM

使用golang進行SelectChannelsGo並發式程式設計的非同步處理方法引言:並發式程式設計是現代軟體開發中的重要領域,它可以有效地提高應用程式的效能和回應能力。在Go語言中,使用Channels和Select語句可以簡單而有效率地實現並發程式設計。本文將介紹如何使用golang進行SelectChannelsGo並發式程式設計的非同步處理方法,並提供具體的

點選input框沒有遊標怎麼辦 點選input框沒有遊標怎麼辦 Nov 24, 2023 am 09:44 AM

點選input框沒有遊標的解決方法:1、確認輸入框焦點;2、清除瀏覽器快取;3、更新瀏覽器;4、使用JavaScript;5、檢查硬體設備;6、檢查輸入框屬性;7、調試JavaScript程式碼;8、檢查頁面其他元素;9、考慮瀏覽器相容性。

如何在Vue中實作多選下拉框 如何在Vue中實作多選下拉框 Nov 07, 2023 pm 02:09 PM

如何在Vue中實作多選下拉框在Vue開發中,下拉框是常見的表單元件之一。通常情況下,我們都會使用單選下拉方塊來選擇一個選項。但是,有時候我們需要實作多選下拉框,以便使用者可以同時選擇多個選項。在本文中,我們將介紹如何在Vue中實作多選下拉框,並提供具體的程式碼範例。一、使用ElementUI元件庫ElementUI是一套基於Vue的桌面端元件庫,提供了豐富的UI

jQuery中如何實作select元素的改變事件綁定 jQuery中如何實作select元素的改變事件綁定 Feb 23, 2024 pm 01:12 PM

jQuery是一個受歡迎的JavaScript函式庫,可以用來簡化DOM操作、事件處理、動畫效果等。在web開發中,常常會遇到需要對select元素進行改變事件綁定的情況。本文將介紹如何使用jQuery實作對select元素改變事件的綁定,並提供具體的程式碼範例。首先,我們需要使用標籤來建立一個包含選項的下拉式選單:

linux要用select的原因是什麼 linux要用select的原因是什麼 May 19, 2023 pm 03:07 PM

因為select可以讓開發者同時等待多個檔案緩衝區,可減少IO等待的時間,能夠提高進程的IO效率。 select()函數是IO多路復用的函數,允許程式監視多個檔案描述符,等待所監視的一個或多個檔案描述符變成「準備好」的狀態;所謂的」準備好「狀態是指:檔案描述子不再是阻塞狀態,可以用於某類IO操作了,包括可讀,可寫,發生異常三種。 select是一個電腦函數,位於頭檔#include。此函數用於監視文件描述符的變化情況-讀寫或是異常。 1.select函數介紹select函數是IO多工的函

See all articles