HTML 選択オプションの基本的な理解と使用

JavaScript での HTML (選択オプション) の詳細な説明
1. 基本的な理解:

コードをコピー

コードは次のとおりです。

var e = document.getElementById("selectId");
e. options = new Option("text","value");
// オプションオブジェクトを作成します。つまり、<select> タグ内に 1 つ以上の <option value="value">text</option> を作成します。
//options は配列で、<option value="value">text</option> のような複数のタグを保存できます。

1: options[]配列のプロパティ:
長さ属性---------長さ属性
selectedIndex プロパティは、現在選択されているボックス内のテキストのインデックス値です。このインデックス値は、(最初のテキスト値、2 番目のテキスト値、3 番目のテキスト値、4 番目のテキスト値..........) に対応するメモリ (0、1、2、3.....) によって自動的に割り当てられます。
2: 単一オプションのプロパティ (---obj.options[obj.selecedIndex] は指定された <option> タグであり、--- です)
テキスト属性---------テキストを返す/指定する
value 属性------ <options value="..."> と一致する値を返す/指定します。
インデックス属性-------添え字を返します。
selected プロパティは、オブジェクトが選択されているかどうかを返します/指定します。true または false を指定することで、選択されている項目を動的に変更できます。
defaultSelected プロパティ-----オブジェクトがデフォルトで選択されているかどうかを返します。真偽。
3: オプションメソッドは <option> タグを追加します-----obj.options.add(new("text","value"));
<option> タグを削除します-----obj.options.remove(obj.selectedIndex)<delete>
<option> タグのテキストを取得します-----obj.options[obj.selectedIndex].text<查>
<option> タグの値を変更します-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
すべての <option> タグを削除します-----obj.options.length = 0
<option> タグの値を取得します-----obj.options[obj.selectedIndex].value
知らせ：
a: 上記のメソッドは、IE および FF と互換性があるため、obj.funciton ではなく obj.options.function() として記述されています。たとえば、obj.add() は IE でのみ有効です。
b: obj.option 内の option は大文字にする必要はありませんが、new Option 内の Option は大文字にする必要があります。
2. 応用

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<スクリプト言語="javascript">
関数番号(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Food","4"); //現在選択されている値を変更する
//obj.options.add(new Option("My food","4"));別のオプションを追加する
//alert(obj.selectedIndex); //シリアル番号を表示します。オプションは自分で設定します
//obj.options[obj.selectedIndex].text = "My food"; 値を変更する
//obj.remove(obj.selectedIndex); 削除関数
}
</スクリプト>
</head>
<本文>
<select id="mySelect">
<option>私のバッグ</option>
<option>私のノートブック</option>
<option>私のオイル</option>
<option>私の重荷</option>
</選択>
<input type="button" name="button" value="結果を表示" onclick="number();">
</本文>
</html>

1. 動的に選択を作成する

コードをコピー

コードは次のとおりです。

関数createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

2. オプションを追加

コードをコピー

コードは次のとおりです。

関数addOption(){
//IDでオブジェクトを検索します。
var obj = document.getElementById('mySelect');
//オプションを追加
obj.add(new Option("text","value")); //これはIEでのみ有効です
obj.options.add(new Option("text","value")); //これはIEとFirefoxと互換性があります
}

3. すべてのオプションを削除する

コードをコピー

コードは次のとおりです。

関数removeAll(){
var obj = document.getElementById('mySelect');
obj.options.length=0;
}

4. オプションを削除する

コードをコピー

コードは次のとおりです。

関数removeOne(){
var obj = document.getElementById('mySelect');
//index、削除するオプションのシリアル番号、ここでは現在選択されているオプションのシリアル番号です
var index=obj.selectedIndex;
obj.options.remove(インデックス);
}

5. オプションオプションの値を取得する

コードをコピー

コードは次のとおりです。

var obj = document.getElementById('mySelect');
var index=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します
var val = obj.options[index].value;

6. オプションのテキストを取得する

コードをコピー

コードは次のとおりです。

var obj = document.getElementById('mySelect');
var index=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します
var val = obj.options[index].text;

7. オプションの変更

コードをコピー

コードは次のとおりです。

var obj = document.getElementById('mySelect');
var index=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します
var val = obj.options[index]=new Option("新しいテキスト","新しい値");

8. 選択を削除

コードをコピー

コードは次のとおりです。

関数removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" content="text/html">
<ヘッド>
<スクリプト言語=JavaScript>
関数 $(id)
{
document.getElementById(id) を返します。
}
関数 show()
{
var selectObj=$("エリア")
var myOption = document.createElement("オプション")
myOption.setAttribute("値","10")
myOption.appendChild(document.createTextNode("上海"))
var myOption1 = document.createElement("オプション")
myOption1.setAttribute("値","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
関数選択()
{
var index=$("area").selectedIndex;
var val = $("area").options[index].getAttribute("value")
（値==10の場合）
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh = document.createElement("選択")
sh.add(新しいオプション("浦東新区","101"))
sh.add(新しいオプション("黄埔区","102"))
sh.add(新しいオプション("徐匯区","103"))
sh.add(新しいオプション("普陀区","104"))
$("コンテキスト").appendChild(sh)
}
（値==100の場合）
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj = document.createElement("選択")
nj.add(新しいオプション("玄武地区","201"))
nj.add(new Option("白下区","202"))
nj.add(新しいオプション("下関地区","203"))
nj.add(新しいオプション("栖霞地区","204"))
$("コンテキスト").appendChild(nj)
}
}
関数calc()
{
var x = $（ "コンテキスト"）。childNodes.length-1;
警告(x)
}
関数削除()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}
</スクリプト>
<本文>
<div id="コンテキスト">
<select id="area" オン
変更="選択肢()">
</選択>
</div>
<input type=button value="表示" onclick="表示()">
<input type=button value="ノードを計算" onclick="calc()">
<input type=button value="削除" onclick="remove()">
</本文>
</html>

これらを踏まえて、JQEURY AJAX+JSON を使用して次のような小さな機能を実装しました。
JSコード: (SELECTに関連するコードのみ取得)

コードをコピー

コードは次のとおりです。

/**
* @description コンポーネントリンクドロップダウンリスト（JQUERYのAJAXとJSONを使用して実装）
* @prarm selectId ドロップダウンリストID
* @prarm method 呼び出されるメソッドの名前
* @prarm temp ソフトウェアIDはここに保存されます
* @prarm url ジャンプ先のアドレス
*/
関数linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get", //バックエンドにアクセスするにはgetメソッドを使用します
dataType: "json", //json形式でデータを返します
url: url, //アクセスするバックエンドアドレス
data: "method=" + method+"&temp="+temp, //送信するデータ
success: function(msg){//msgは返されるデータであり、ここでデータバインディングが行われます
var データ = msg.lists;
選択した ID とデータを含む coverJsonToHtml をカバーします。
}
});
}
/**
* @description JSONデータをHTMLデータ形式に変換する
* @prarm selectId ドロップダウンリストID
* @prarm nodeArray は JSON 配列を返します
*
*/
関数 coverJsonToHtml(selectId,nodeArray){
//選択を取得
var tempSelect=$j("#"+selectId);
//選択値をクリア
isClearSelect(選択ID,'0');
var tempOption=null;
for(var i=0;i<nodeArray.length;i++){
//選択オプションを作成する
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//選択するオプションを入れる
tempSelect.append(tempOption);
}
// 劣化したコンポーネントのリストを取得します
getCpgjThgl(selectId, 'thgjDm');
}
/**
* @description ドロップダウンリストの値をクリアします
* @prarm selectId ドロップダウンリストID
* @prarm index クリアを開始する添え字の位置
*/
関数 isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(長さ!=インデックス){
//長さは再取得する必要があるため変更されます
長さ=document.getElementById(selectId).options.length;
for(var i=index;i<length;i++)
document.getElementById(selectId).options.remove(i);
長さ=長さ/2;
}
}
/**
* @description 縮退したコンポーネントのリストを取得します
* @prarm selectId1はソフトウェアドロップダウンリストのIDを参照します
* @prarm selectId2 縮退コンポーネントのドロップダウンリストのID
*/
関数 getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1); //参照ソフトウェアのドロップダウンリスト
var obj2=document.getElementById(selectId2); // コンポーネントのドロップダウンリストを縮退する
var len=obj1.options.length;
//参照されたソフトウェアリストの長さが1に等しい場合は、何もせずに戻ります
長さ==1の場合{
false を返します。
}
// ドロップダウンリストの値をクリアします。どちらの方法でも問題ありません
// isClearSelect(selectId2,'1');
ドキュメント.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
var オプション = obj1.options[i];
//参照ソフトウェアが選択されており、含まれていません
if(i!=obj1.selectedIndex){
//OPTIONを複製してSELECTに追加します
obj2.appendChild(option.cloneNode(true));
}
}
}

HTMLコード:

コードをコピー

コードは次のとおりです。

<表の幅="100%" 境界線=0 配置="左" セルパディング=0 セル間隔=1>
<tr>
<td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用ソフトウェア:</td>
<td class="Search_content_82">
<input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
<入力名="yyrjDm" id="yyrjDm" タイプ="hidden" >
<input type="button" class="Search_button_select"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="選択...">
</td>
</tr>
<tr>
<td class="Search_item"> <span class="Edit_mustinput">*</span>引用バージョン:</td>
<td class="検索コンテンツ" id="yyfb">
<select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</選択>
</td>
</tr>
<tr>
<td class="Search_item">劣化したコンポーネント:</td>
<td class="検索コンテンツ" id="thgj">
<select name="thgjDm" style="width:160" id="thgjDm">
<option value="-1" が選択されました>なし</option>
</選択>
</td>
</tr>
</表>

<<: Vue双方向バインディングの詳細な説明

>>: CSS3 はアニメーション属性を使用してクールな効果を実現します (推奨)