ホームページ ウェブフロントエンド jsチュートリアル js 動的に変更する 選択 オプションのインデックス値を変更する example_javascript スキル

js 動的に変更する 選択 オプションのインデックス値を変更する example_javascript スキル

May 16, 2016 pm 04:42 PM
option select

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 から長さまでではなく、大きいものから小さいものまで)

// 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 選択オプションに Value="paraValue" の項目があるかどうかを確認します
2. 選択オプションにアイテムを追加します
3選択オプションからアイテムを削除します
4選択<🎜>で選択した項目を削除します 5 選択オプションの value="paraValue" のテキストを "paraText" に変更します
6選択範囲内のtext="paraText"の最初の項目を選択対象に設定します
7selectにvalue="paraValue"の項目を選択状態に設定します
8 select
の現在選択されている項目の値を取得します 9 select
の現在選択されている項目のテキストを取得します 10 選択
の現在選択されている項目のインデックスを取得します 11選択した項目をクリア

=========================================== === =======================

選択内のすべてのオプションを動的に削除します:


function deleteAllOptions(sel){ 
sel.options.length=0; 
}
ログイン後にコピー
選択内のオプションを動的に削除します:


function deleteOption(sel,indx){ 
sel.options.remove(indx); 
}
ログイン後にコピー
選択オプションに項目を動的に追加します:


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>
ログイン後にコピー
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jqueryでselect要素を非表示にする方法 jqueryでselect要素を非表示にする方法 Aug 15, 2023 pm 01:56 PM

jquery で select 要素を非表示にする方法: 1. hide() メソッド。jQuery ライブラリを HTML ページに導入します。さまざまなセレクターを使用して select 要素を非表示にできます。ID セレクターは、selectId を選択した select 要素の ID に置き換えます。実際に使用する; 2. css() メソッド、ID セレクターを使用して非表示にする必要がある select 要素を選択し、css() メソッドを使用して表示属性を none に設定し、selectId を select 要素の ID に置き換えます。

Select Channels Goの非同期処理方法 golangを使った並行プログラミング Select Channels Goの非同期処理方法 golangを使った並行プログラミング Sep 28, 2023 pm 05:27 PM

golang を使用した SelectChannelsGo 同時プログラミングの非同期処理方法 はじめに: 同時プログラミングは、アプリケーションのパフォーマンスと応答性を効果的に向上させることができる、現代のソフトウェア開発における重要な領域です。 Go 言語では、Channel と Select ステートメントを使用して同時プログラミングを簡単かつ効率的に実装できます。この記事では、SelectChannelsGo 同時プログラミングの非同期処理メソッドに golang を使用する方法を紹介し、具体的な方法を提供します。

Linux ドキュメントのオプションは何を意味しますか? Linux ドキュメントのオプションは何を意味しますか? Mar 07, 2023 am 10:41 AM

Linux では、オプションとはコマンドのオプションを指し、コマンドの実行動作を調整するスイッチ、つまり、オプションの違いによってコマンドの表示結果が決まります。オプションは長いオプションと短いオプションに分けられます: 1. 短いオプションは「-」でガイドされます。短いオプションが複数ある場合は、各オプションを区切るためにスペースが使用されます。 2. 長いオプションは完全な単語であり、通常は組み合わせることはできません。 。

jQueryで選択要素の変更イベントバインディングを実装する方法 jQueryで選択要素の変更イベントバインディングを実装する方法 Feb 23, 2024 pm 01:12 PM

jQuery は、DOM 操作、イベント処理、アニメーション効果などを簡素化するために使用できる人気のある JavaScript ライブラリです。 Web 開発では、選択した要素のイベント バインディングを変更する必要がある状況によく遭遇します。この記事では、jQuery を使用して選択要素変更イベントをバインドする方法を紹介し、具体的なコード例を示します。まず、ラベルを使用してオプションを含むドロップダウン メニューを作成する必要があります。

Linux が select を使用する理由は何ですか? Linux が select を使用する理由は何ですか? May 19, 2023 pm 03:07 PM

select を使用すると、開発者は複数のファイル バッファーを同時に待機できるため、IO 待機時間を短縮し、プロセスの IO 効率を向上させることができます。 select() 関数は、プログラムが複数のファイル記述子を監視し、監視されている 1 つ以上のファイル記述子が「準備完了」になるのを待機できるようにする IO 多重化関数です。いわゆる「準備完了」状態とは、ファイルを指します。記述子はブロックされなくなり、読み取り可能、書き込み可能、​​例外を含む特定の種類の IO 操作に使用できるようになりました。 select は、ヘッダー ファイル #include にあるコンピューター関数です。この関数は、ファイル記述子の変更 (読み取り、書き込み、または例外) を監視するために使用されます。 1. セレクト機能の概要 セレクト機能はIO多重化機能です。

mysqlのselect構文の使い方 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 による同時プログラミングのパフォーマンス最適化 選択チャネルの実装 golang による同時プログラミングのパフォーマンス最適化 Sep 27, 2023 pm 01:09 PM

golang による SelectChannels の実装 Go 同時プログラミングのパフォーマンスの最適化 Go 言語では、ゴルーチンとチャネルを使用して同時プログラミングを実装するのが非常に一般的です。複数のチャネルを扱う場合、通常は多重化に select ステートメントを使用します。ただし、大規模な同時実行の場合、select ステートメントを使用するとパフォーマンスが低下する可能性があります。この記事では、golang による select の実装をいくつか紹介します。

チャンネルを選択 Golang を使用して信頼性と堅牢性を実現する同時プログラミングを実行する チャンネルを選択 Golang を使用して信頼性と堅牢性を実現する同時プログラミングを実行する Sep 28, 2023 pm 05:37 PM

Golang を使用した信頼性と堅牢性のための SelectChannels 同時プログラミングの概要: 最新のソフトウェア開発では、同時実行性が非常に重要なトピックになっています。並行プログラミングを使用すると、プログラムの応答性が向上し、コンピューティング リソースがより効率的に利用され、大規模な並列コンピューティング タスクをより適切に処理できるようになります。 Golang は非常に強力な同時プログラミング言語であり、go コルーチンとチャネル メカニズムを通じて同時プログラミングを実装するためのシンプルかつ効果的な方法を提供します。

See all articles