Home Web Front-end JS Tutorial Javascript operation example for drop-down list box (select)_javascript skills

Javascript operation example for drop-down list box (select)_javascript skills

May 16, 2016 pm 05:11 PM
select

This article is mainly about the most basic methods related to javascript and select, for reference by people who are not familiar with javascript. A common situation is that the person who proposes the form structure not only needs to design logic for the program and create data structures, but also needs to design the style of the form and be familiar with javascript; some companies may require you to be proficient in photoshop: initially, we all Be an all-rounder.

The following is the basis of our example; this is not a standard form.



-------------------------------------------------- ----------------------------

Copy codeThe code is as follows:


//全选列表中的项
function SelectAllOption(list)
{
for (var i=0; i{
list.options[i].selected = true;
}
}


//反选列表中的项 by jb51.net asp学习网
function DeSelectOptions(list)
{
for (var i=0; i{
list.options[i].selected = !list.options[i].selected;
}
}


//返回列表中选择项数目
function GetSelectedOptionsCnt(list)
{
var cnt = 0;
var i = 0;
for (i=0; i{
if (list.options[i].selected)
{
cnt++;
}
}

return cnt;
}


//清空列表
function ClearList(list)
{
while (list.options.length > 0)
{
list.options[0] = null;
}
}


//删除列表选中项
//返回删除项的数量
function DelSelectedOptions(list)
{
var i = 0;
var deletedCnt = 0;
while (i < list.options.length)
{
if (list.options[i].selected)
{
list.options[i] = null;
deletedCnt++;
}
else
{
i++;
}
}

return deletedCnt;
}
//此函数查找相应的项是否存在
//repeatCheck是否进行重复性检查
//若为"v",按值进行重复值检查
//若为"t",按文字进行重复值检查
//若为"vt",按值和文字进行重复值检查
//其它值,不进行重复性检查,返回false
function OptionExists(list, optText, optValue, repeatCheck)
{
var i = 0;
var find = false;

if (repeatCheck == "v")
{
//按值进行重复值检查
for (i=0; i{
if (list.options[i].value == optValue)
{
find = true;
break;
}
}
}
else if (repeatCheck == "t")
{
//按文字进行重复检查
for (i=0; i{
if (list.options[i].text == optText)
{
find = true;
break;
}
}
}
else if (repeatCheck == "vt")
{
//按值和文字进行重复检查
for (i=0; i{
if ((list.options[i].value == optValue) && (list.options[i].text == optText))
{
find = true;
break;
}
}
}

return find;
}


//向列表中追加一个项
//list 是要追加的列表
//optText 和 optValue 分别表示项的文字和值
//repeatCheck 是否进行重复性检查,参见 OptionExists
//添加成功返回 true,失败返回 false
function AppendOption(list, optText, optValue, repeatCheck)
{
if (!OptionExists(list, optText, optValue, repeatCheck))
{
list.options[list.options.length] = new Option(optText, optValue);
return true;
}
else
{
return false;
}
}


//插入项
//index 插入位置,当插入位置 >= 列表现有项数量时,其作用相当于不进行重复检查的追加项
//optText 和 optValue 分别表示项的文字和值
function InsertOption(list, index, optText, optValue)
{
var i = 0;
for (i=list.options.length; i>index; i--)
{
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
}

list.options[index] = new Option(optText, optValue);
}
//Export items in one list to another list
//RepeatCheck whether to perform repeatability checks , see OptionExists
//After the deleteSource item is imported to the target, whether to delete the item in the source list
//Return the number of affected items
function ListToList(sList, dList, repeatCheck, deleteSource)
{
//The number of lines affected
var lines = 0;
var i = 0;
while (i{
if (sList. options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value, repeatCheck))
{
//Added successfully
lines;
if (deleteSource)
{
//Delete items in the source list
sList.options[i] = null;
}
else
{
i;
}
}
else
{
i ;
}
}

return lines;
}


//Move the selected item up in the list
function MoveSelectedOptionsUp(list)
{
var i = 0;
var value = "";
var text = " ";
for (i=0; i<(list.options.length-1); i )
{
if (!list.options[i].selected && list.options[i 1 ].selected)
{
value = list.options[i].value;
text = list.options[i].text;
list.options[i] = new Option(list .options[i 1].text, list.options[i 1].value);
list.options[i].selected = true;
list.options[i 1] = new Option(text, value);
}
}
}


//Move the selected item down in the list
function MoveSelectedOptionsDown(list)
{
var i = 0;
var value = "";
var text = " ";
for (i=list.options.length-1; i>0; i--)
{

//www.jb51.net
if (!list.options[i].selected && list.options[i-1].selected)
{
value = list.options[i ].value;
text = list.options[i].text;
list.options[i] = new Option(list.options[i-1].text, list.options[i-1] .value);
list.options[i].selected = true;
list.options[i-1] = new Option(text, value);
}
}
}

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Asynchronous processing method of Select Channels Go concurrent programming using golang Asynchronous processing method of Select Channels Go concurrent programming using golang Sep 28, 2023 pm 05:27 PM

Asynchronous processing method of SelectChannelsGo concurrent programming using golang Introduction: Concurrent programming is an important area in modern software development, which can effectively improve the performance and responsiveness of applications. In the Go language, concurrent programming can be implemented simply and efficiently using Channels and Select statements. This article will introduce how to use golang for asynchronous processing methods of SelectChannelsGo concurrent programming, and provide specific

How to hide the select element in jquery How to hide the select element in jquery Aug 15, 2023 pm 01:56 PM

How to hide the select element in jquery: 1. hide() method, introduce the jQuery library into the HTML page, you can use different selectors to hide the select element, the ID selector replaces the selectId with the ID of the select element you actually use; 2. css() method, use the ID selector to select the select element that needs to be hidden, use the css() method to set the display attribute to none, and replace selectId with the ID of the select element.

How to implement change event binding of select elements in jQuery How to implement change event binding of select elements in jQuery Feb 23, 2024 pm 01:12 PM

jQuery is a popular JavaScript library that can be used to simplify DOM manipulation, event handling, animation effects, etc. In web development, we often encounter situations where we need to change event binding on select elements. This article will introduce how to use jQuery to bind select element change events, and provide specific code examples. First, we need to create a dropdown menu with options using labels:

What is the reason why Linux uses select? What is the reason why Linux uses select? May 19, 2023 pm 03:07 PM

Because select allows developers to wait for multiple file buffers at the same time, it can reduce IO waiting time and improve the IO efficiency of the process. The select() function is an IO multiplexing function that allows the program to monitor multiple file descriptors and wait for one or more of the monitored file descriptors to become "ready"; the so-called "ready" state is Refers to: the file descriptor is no longer blocked and can be used for certain types of IO operations, including readable, writable, and exceptions. select is a computer function located in the header file #include. This function is used to monitor file descriptor changes—reading, writing, or exceptions. 1. Introduction to the select function. The select function is an IO multiplexing function.

How to use the select syntax of mysql How to use the select syntax of mysql Jun 01, 2023 pm 07:37 PM

1. Keywords in SQL statements are not case-sensitive. SELECT is equivalent to SELECT, and FROM is equivalent to from. 2. To select all columns from the users table, you can use the symbol * to replace the column name. Syntax--this is a comment--query out [all] data from the [table] specified by FEOM. * means [all columns] SELECT*FROM--query out the specified data from the specified [table] from FROM Data of column name (field) SELECT column name FROM table name instance--Note: Use English commas to separate multiple columns selectusername, passwordfrom

Implement Select Channels Go concurrent programming performance optimization through golang Implement Select Channels Go concurrent programming performance optimization through golang Sep 27, 2023 pm 01:09 PM

Implementing SelectChannels through golang Performance optimization of Go concurrent programming In the Go language, it is very common to use goroutine and channel to implement concurrent programming. When dealing with multiple channels, we usually use select statements for multiplexing. However, in the case of large-scale concurrency, using select statements may cause performance degradation. In this article, we will introduce some implementations of select through golang

Select Channels Go concurrent programming for reliability and robustness using golang Select Channels Go concurrent programming for reliability and robustness using golang Sep 28, 2023 pm 05:37 PM

SelectChannels for Reliability and Robustness Using Golang Introduction to Concurrent Programming: In modern software development, concurrency has become a very important topic. Using concurrent programming can make programs more responsive, utilize computing resources more efficiently, and be better able to handle large-scale parallel computing tasks. Golang is a very powerful concurrent programming language. It provides a simple and effective way to implement concurrent programming through go coroutines and channel mechanisms.

How to use golang for Select Channels Go concurrent programming How to use golang for Select Channels Go concurrent programming Sep 27, 2023 pm 09:07 PM

How to use golang for SelectChannelsGo concurrent programming Go language is a language that is very suitable for concurrent programming, in which the channel (Channel) and the Select statement are two important elements to achieve concurrency. This article will introduce how to use golang's SelectChannels for concurrent programming and provide specific code examples. 1. The concept of channel Channel is used for communication and data between goroutines

See all articles