js動態改變select選擇變更option的index值範例_javascript技巧
document.getElementById("louyuming").options[0].selected=true;
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}Javascript 操作select是表單中常見的一種，今天刪除多個select值的時候出現了問題，搞了半天原來是索引引起的（即刪除的時候要從索引大的開始刪，然後再刪除索引小的，否則刪除了索引小的後索引大的索引就變化了，再刪除時就會出現問題——問題的關鍵是for循環是要從大到小，而不是常規的從0到length）
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}1判斷select選項中 是否存在Value="paraValue"的Item
2向select選項中 加入一個Item
3從select選項 刪除一個Item
4刪除select中選取的項目
5修改select選項中 value="paraValue"的text為"paraText"
6設定select中text="paraText"的第一個Item為選取
7設定select中value="paraValue"的Item為選取
8得到select的目前選取項的value
9得到select的目前選取項目的text
10得到select的目前選取項目的Index
11清空select的項
=============================================== =======================
動態刪除select中的所有options：
function deleteAllOptions(sel){
sel.options.length=0;
}動態刪除select中的某一項option：
function deleteOption(sel,indx){
sel.options.remove(indx);
}動態加入select中的項option:
function addOption(sel,text,value){
sel.options.add(new Option(text,value));
}上面在IE和FireFox都能測試成功，希望以後可以用上。
===========================================
js 程式碼
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}
// 7.设置select中value="paraValue"的Item为选中
objSelect.value = objItemValue;
// 8.得到select的当前选中项的value
var currSelectValue = objSelect.value;
// 9.得到select的当前选中项的text
var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index
var currSelectIndex = objSelect.selectedIndex;
// 11.清空select的项
objSelect.options.length = 0;整個實例的完整程式碼如下：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
// Author: i@lxl.cn
// Modify: i@cnlei.com
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="增加" onclick="watch_add(this.form);" />
<input type="button" value="修改" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保存" onclick="watch_set(this.form);" />
</form>
</body>
</html>
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
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並發式程式設計的非同步處理方法
Sep 28, 2023 pm 05:27 PM
使用golang進行SelectChannelsGo並發式程式設計的非同步處理方法引言：並發式程式設計是現代軟體開發中的重要領域，它可以有效地提高應用程式的效能和回應能力。在Go語言中，使用Channels和Select語句可以簡單而有效率地實現並發程式設計。本文將介紹如何使用golang進行SelectChannelsGo並發式程式設計的非同步處理方法，並提供具體的
linux文檔中option什麼意思
Mar 07, 2023 am 10:41 AM
在linux中，option是指指令選項，是調整指令執行行為的開關，也就是選項不同決定了指令的顯示結果不同。 option（選項）分為長選項與短選項：1、短選項都是使用「-」引導，當有多個短選項時，各選項之間使用空格隔開；2、長選項都是完整的單字，且通常不能組合。
jQuery中如何實作select元素的改變事件綁定
Feb 23, 2024 pm 01:12 PM
jQuery是一個受歡迎的JavaScript函式庫，可以用來簡化DOM操作、事件處理、動畫效果等。在web開發中，常常會遇到需要對select元素進行改變事件綁定的情況。本文將介紹如何使用jQuery實作對select元素改變事件的綁定，並提供具體的程式碼範例。首先，我們需要使用標籤來建立一個包含選項的下拉式選單：
linux要用select的原因是什麼
May 19, 2023 pm 03:07 PM
因為select可以讓開發者同時等待多個檔案緩衝區，可減少IO等待的時間，能夠提高進程的IO效率。 select()函數是IO多路復用的函數，允許程式監視多個檔案描述符，等待所監視的一個或多個檔案描述符變成「準備好」的狀態；所謂的」準備好「狀態是指：檔案描述子不再是阻塞狀態，可以用於某類IO操作了，包括可讀，可寫，發生異常三種。 select是一個電腦函數，位於頭檔#include。此函數用於監視文件描述符的變化情況－讀寫或是異常。 1.select函數介紹select函數是IO多工的函
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實現Select Channels Go並發式程式設計的效能優化
Sep 27, 2023 pm 01:09 PM
透過golang實現SelectChannelsGo並發式程式設計的效能優化在Go語言中，使用goroutine和channel實現並發程式設計是非常常見的。而在處理多個channel的情況下，我們通常會使用select語句來進行多重化。但是，在大規模並發的情況下，使用select語句可能會導致效能下降。在本文中，我們將介紹一些透過golang實作select
使用golang實現可靠性和穩健性的Select Channels Go並發式編程
Sep 28, 2023 pm 05:37 PM
使用Golang實現可靠性和穩健性的SelectChannelsGo並發式程式設計引言：在現代軟體開發中，並發性已經成為了一個非常重要的主題。使用並發程式設計可以使得程式更有反應性、更有效率地利用運算資源，並且能夠更好地處理大規模的平行運算任務。 Golang是一種非常強大的並發程式語言，它透過go協程和channel機制，提供了一種簡單而有效的方式來實現並發程式設計
