selectタグのJavaScriptコントロール(optionオプション/select)_javascriptスキル

html の select タグは、asp.net の asp:DropDownList コントロールでもあります。
それらに対する Javascript の操作
1. 基本的な理解

コードをコピーします コードは次のとおりです

var e = document.getElementById("selectId");
e. options= new Option("text","value"); // オプションを作成します。オブジェクト、つまり、1 つ以上の text//options は、複数の Text このようなタグ

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

コードをコピーします

change="choice()">

根据这些东西,自己用JQEURY AJAX JSON实现了一个小功能如下:
JS代码:(只取了于SELECT相关的代码)

复制代码 代码如下:

/**
* @description Component linkage drop-down list (implemented using JQUERY's AJAX and JSON)
* @prarm selectId The ID of the drop-down list
* @prarm method The name of the method to be called
* @prarm temp this Store the software ID at
* @prarm url The address to jump to
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//Use The get method accesses the backend
dataType: "json",//Returns data in json format
url: url,//The backend address to be accessed
data: "method=" method "&temp=" temp, //Data to be sent
success: function(msg){//msg is the returned data, do data binding here
var data = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description Convert JSON data into HTML data format
* @prarm selectId ID of the drop-down list
* @prarm nodeArray Returned JSON array
*
*/
function coverJsonToHtml(selectId,nodeArray){
//get select
var tempSelect=$ j("#" selectId);
//clear select value
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i//create select Option
tempOption= $j('' nodeArray[i].mc ' 🎜>}
/**
* @description Clear the value of the drop-down list
* @prarm selectId The ID of the drop-down list
* @prarm index The index position to start clearing
*/
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!= index){
//The length is changing because it must be reacquired
length=document.getElementById(selectId).options.length;
for(var i=index;idocument.getElementById(selectId).options.remove(i);
length=length/2;
}
}
/**
* @description Get the list of degraded components
* @prarm selectId1 Reference the ID of the software drop-down list
* @prarm selectId2 ID of the degraded component drop-down list
*/
function getCpgjThgl (selectId1,selectId2){
var obj1=document.getElementById(selectId1);//Reference software drop-down list
var obj2=document.getElementById(selectId2);//Degenerate component drop-down list
var len= obj1.options.length;
//Return when the length of the referenced software list is equal to 1, no operation is performed
if(len==1){
return false;
}
// Clear the value of the drop-down list, both methods are available
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i< ;len; i ){
var option= obj1.options[i];
//The selected items of the referenced software are not added
if(i!=obj1.selectedIndex){
//Clone OPTION and add to SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}


HTML code:

Copy code

The code is as follows:


< ;td class="Search_content" id="yyfb">

*Quoting software:	onClick="linkAgeTree(' linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Select...">
*Citation branch:
Degenerate component:	None