ドロップダウンリストボックス（選択）のJavaScript操作例_javascriptスキル-jsチュートリアル-php.cn

この記事では、JavaScript に詳しくない人向けに、JavaScript と select に関連する最も基本的なメソッドを主に説明します。よくあるのは、フォーム構造を提案する人は、プログラムのロジックを設計してデータ構造を作成するだけでなく、フォームのスタイルを設計し、JavaScript に精通している必要があるということです。 Photoshop の場合: 最初は、私たちは皆、オールラウンダーである必要があります。

以下はこの例の基礎です。これは標準的な形式ではありません。

スクリプトホーム Baidu ----------------------------------------------- --- ----------------------------

コードをコピー コードは次のとおりです: var f = document.getElementById("f");

//获得select列表项数目 document.write(f.s.options.length); document.write(f.s.length);

//当前选中项的下标(从0 开始)（有两种方法） //如果选择了多项，则返回第一个选中项的下标 document.write(f.s.options.selectedIndex); document.write(f.s.selectedIndex);

//检测某一项是否被选中 document.write(f.s.options[0].selected);

//获得某一项的值和文字 document.write(f.s.options[0].value); document.write(f.s.options[1].text);

//删除某一项 f.s.options[1] = null;

//追加一项 f.s.options[f.s.options.length] = new Option("追加的text", "追加的value");

//更改一项 f.s.options[1] = new Option("更改的text", "更改的value"); //也可以直接设置该项的 text 和 value //--> //全选列表中的项 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 { 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); } //あるリスト内の項目を別のリストにエクスポートします //再現性チェックを実行するかどうかを繰り返し確認します。OptionExists を参照してください。 🎜>//deleteSource 項目がターゲットにインポートされた後、ソース リスト内の項目を削除するかどうか //影響を受ける項目の数を返します function ListToList(sList, dList,repeatCheck,deleteSource) { //影響を受ける行数 var Lines = 0; while (i { if ( sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value,repeatCheck)) { // 行が正常に追加されました。 if (deleteSource) { //ソースリスト内の項目を削除 sList.options[i] = null; else { i ; } } else { i ; }

行を返す }

//選択した項目をリスト内で上に移動します function MoveSelectedOptionsUp(list)

{ var i = 0; var value = ""; = " "; for (i=0; i{ if (!list.options[i].selected && list.options[ i 1 ].selected) { value = list.options[i].value; text = list.options[i].text; list.options[i] = 新しいオプション(リスト .options[i 1].text, list.options[i 1].value); list.options[i].selected = true; list.options[i 1] = 新しいオプション(テキスト、値); } } }

//選択した項目をリスト内で下に移動します 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] = 新しいオプション(list.options[i-1].text, list.options[i-1] .value); list.options[i].selected = true; list.options[i-1] = 新しいオプション(テキスト, 値);