JavaScriptのオプション操作メソッド集 タグフォームエフェクト選択

JavaScript は、Select タグ
でオプション コレクションを操作します。 まず、オプション コレクションのこれらのメソッドを見てみましょう。
options.add(option) メソッドは、オプション オブジェクトをコレクションに追加します。
options.remove(index)メソッドは、オプション コレクション内の指定された項目を削除します。
options(index) または options.item(index) は、インデックスを通じてオプション コレクション内の指定された項目を取得できます。JavaScript コードは次のとおりです。

var selectTag = null; // タグを選択
var OPTONLENGTH = 10; // 毎回入力されるオプションの数
var colls = [] // タグのオプションを選択するための参照

window.onload = function(){
selectTag = document.getElementById("SelectBox"); //選択タグを取得します
colls = selectTag.options; //参照を取得しますinitSelectBox(); //自己初期化 select.options

//select.options を埋めるために乱数を使用します
function initSelectBox(){
varrandom = 0; 🎜>var optionItem = null;

if(colls.length > 0 && isClearOption()){
clearOptions(colls); 🎜>for(var i=0;i
random = Math.floor(Math.random()*9000) 1000;
item = new Option(random,random) ; // Option() コンストラクター オプション オブジェクトを通じて作成されます
selectTag.options.add(item) // オプション コレクションに追加します

}
//新しいオプション項目を追加する前に現在のオプションをクリアするかどうか
function isClearOption(){
return document.getElementById("chkClear").checked; }
//オプションをクリアするコレクション
function clearOptions(colls){
var length = colls.length;
for(var i=length-1;i>=0;i--){
colls.remove(i) );
}
}
// 新しいオプションを追加します
function addOption(){
cols.add(createOption());
lastOptionOnFocus(colls.length-1) ;
watchState();
}
// オプション オブジェクトを作成します
function createOption(){
var random = Math.floor(Math.random()*9000)
return new Option(random,random);
}
// オプション コレクションで指定されたオプションを削除
function RemoveOption(index){
if(index >= 0){
colls.remove(index);
lastOptionOnFocus(colls.length-1);
watchState();
}
//現在選択されているオプションのインデックスを取得しますgetSelectedIndex(){
return selectTag. selectedIndex;
// オプションの総数を取得します
function getOptionLength(){
return colls.length>}
//現在選択されているオプション text を取得します
function getCurrentOptionValue(index){
if(index >= 0)
return colls(index).value
}
//現在選択されているオプション値
function getCurrentOptionText(index){
if(index >= 0)
return colls(index).text;
}
//オプションの最後の項目を使用しますフォーカスを取得するコレクション
function lastOptionOnFocus(index) {
selectTag.selectedIndex =index;
}
//選択タグのステータスを表示
function watchState(){
var divWatch = document.getElementById("divWatch");
var innerHtml="";
innerHtml = "オプションの総数:" getOptionLength();
innerHtml = "
現在のアイテム インデックス:" getSelectedIndex( );
innerHtml = "
現在の項目のテキスト:" getCurrentOptionText(getSelectedIndex());
innerHtml = "
現在の項目の値:" getCurrentOptionValue(getSelectedIndex()); = innerHtml;
divWatch.align = "justify";
}

上記のオプション項目を作成するとき、このコンストラクターには 2 つのバージョンのオーバーロードが使用されることに注意してください。
1. var option = new Option(text,value); // ここで Option() を大文字にします
2. var option = new Option();
option . value=value;
個人的には、オプション オブジェクトを作成する最初の方法を好みます。
さらに、select タグには selectedIndex と呼ばれるより便利な属性もあり、現在選択されているオプションのインデックスを取得したり、インデックス設定を通じてオプション コレクション内のどの項目が選択されているかを指定したりできます。
select.selectedIndex = select.options.length-1; // オプション コレクションの最後の項目を選択します
var selectedItem = select.options(select.selectedIndex);// 現在選択されている項目を取得します
selectedItem .text; //選択された項目のテキスト
selectedItem.value //選択された項目の値

---

SelectBox を乱数で初期化

クリア

---

オプション項目を追加

---

オプション項目を削除