基本的な理解:
var e = document.getElementById("selectId");
e. options= 新しいオプション("テキスト","値");
// オプション オブジェクトを作成します。つまり、<select> タグ内に 1 つ以上の <option value="value">text</option> を作成します。
//options は配列であり、<option value="value">text</option> などの複数のタグを格納できます。
1: options[ ] 配列のプロパティ:
長さ属性--------長さ属性
selectedIndex 属性--------現在選択されているボックス内のテキストのインデックス値。このインデックス値は、(最初のテキスト値に対応する) メモリ (0、1、2、3...) によって自動的に割り当てられます。 、2 番目のテキスト値、3 番目のテキスト値、4 番目のテキスト値...)
2: 単一オプションの属性(---obj.options[obj.selecedIndex] は指定された <option> タグであり、---)
text 属性------テキストを返す/指定する
value 属性------<options value="..."> と一致する値を返す/指定します。
インデックス属性------添え字を返します。
selected 属性 ------- オブジェクトが選択されているかどうかを返す/指定します。 true または false を指定することで、選択された項目を動的に変更できます。
defaultSelected 属性-----オブジェクトがデフォルトで選択されているかどうかを返します。真/偽。
3：オプション方式
<option> タグを追加します-----obj.options.add(new("text","value"));<add>
<option> タグを削除します-----obj.options.remove(obj.selectedIndex)<delete>
<option> タグのテキストを取得します-----obj.options[obj.selectedIndex].text<check>
<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.add() などは IE でのみ有効であるため、 obj.funciton ではなくこのタイプのメソッド obj.options.function() のように記述されています。
b: obj.option のオプションは大文字にする必要はありませんが、新しい Option のオプションは大文字にする必要があります。
2つのアプリケーション
次のようにコードをコピーします。
<html>
<頭>
<スクリプト言語="javascript">
関数番号(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//現在選択されているオプションの値を変更します
//obj.options.add(new Option("My food","4"));別のオプションを追加します
//alert(obj.selectedIndex);//シリアル番号を表示、オプションは独自に設定されます
//obj.options[obj.selectedIndex].text = "私の食べ物";
//obj.remove(obj.selectedIndex);
}
</script>
</head>
<本文>
<select id="mySelect">
<option>マイバッグ</option>
<option>私のノート</option>
<option>私のオイル</option>
<option>私の負担</option>
</選択>
<input type="button" name="button" value="結果を表示" onclick="number();">
</body>
</html>
これらのことを踏まえて、次のように JQEURY AJAX+JSON を使用した小さな関数を実装しました。
JSコード：（SELECTに関係するコードのみ取得）
次のようにコードをコピーします。
/**
* @description コンポーネント連携ドロップダウン リスト (JQUERY の AJAX および JSON を使用して実装)
* @prarm selectId ドロップダウン リストの ID
* @prarm メソッド 呼び出されるメソッドの名前
* @prarm temp ソフトウェア ID がここに保存されます
* @prarm url ジャンプ先のアドレス
*/
function 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;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description JSONデータをHTMLデータ形式に変換します
* @prarm selectId ドロップダウン リストの ID
* @prarm nodeArray は JSON 配列を返しました
*
*/
function coverJsonToHtml(selectId,nodeArray){
//選択を取得
var tempSelect=$j("#"+selectId);
//選択値をクリア
isClearSelect(selectId,'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
* @prarmindex クリアを開始するインデックス位置
*/
関数 isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(長さ!=インデックス){
//再取得する必要があるため、長さが変更されています
length=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の場合はそのまま返却し、何も行わない。
if(len==1){
false を返します。
}
// ドロップダウン リストの値をクリアします。どちらの方法も使用できます。
// isClearSelect(selectId2,'1');
document.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コード:
次のようにコードをコピーします。
<TABLE border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td> <span>*</span>ソフトウェアの引用:</td>
<td>
<input name="yyrjMc" id="yyrjMc" type="text" tabindex="3" size="30" >
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<input type="ボタン"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="選択...">
</td>
</tr>
<tr>
<td> <span>*</span>引用バージョン:</td>
<td id="yyfb">
<select name="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</選択>
</td>
</tr>
<tr>
<td>コンポーネントの縮退:</td>
<td id="thgj">
<select name="thgjDm" id="thgjDm">
<option value="-1" selected>なし</option>
</選択>
</td>
</tr>
</テーブル>