Grundlegendes Verständnis und Verwendung von HTML wählen Option_HTML/Xhtml_Webseitenerstellung

Detaillierte Erklärung von HTML (Option auswählen) in Javascript
1. Grundverständnis:

Code kopieren

Der Code lautet wie folgt:

var e = document.getElementById("selectId");
e 🎜>//Ein Optionsobjekt erstellen, d. h. ein oder mehrere text erstellen.
//options ist ein Array, in dem mehrere tag value="value">Text Tags wie dieser

1:options[ ]Attribute des Arrays:
length attribute------- --Length-Attribut
selectedIndex-Attribut--------Der Indexwert des Textes im aktuell ausgewählten Feld. Dieser Indexwert wird automatisch vom Speicher zugewiesen (0,1,2,3...) entsprechend (Nr. Ein Textwert, zweiter Textwert, dritter Textwert, vierter Textwert...)
2: Attribute einer einzelnen Option (---obj.options[ obj.selectedIndex] ist ein angegebener < ;option>-Tag, das ein --- ist)
Textattribut---------Text zurückgeben/angeben
Wertattribut------ Einen Wert zurückgeben/angeben, konsistent mit < ;options value="...">.
index attribute-------gibt den Index zurück,
selected attribute-------gibt/gibt an, ob das Objekt ausgewählt ist. Durch Angabe von true oder false kann das ausgewählte Element dynamisch geändert werden
defaultSelected-Attribut-----Gibt zurück, ob das Objekt standardmäßig ausgewählt ist. wahr/falsch.
3: Optionsmethode
Fügen Sie ein -Tag hinzu-----obj.options.add(new("text","value")); ;option> label-----obj.options.remove(obj.selectedIndex)
Holen Sie sich den Text eines text
Ändern Sie den Wert eines >Alle -Tags löschen-----obj.options.length = 0
Den Wert eines -Tags abrufen-----obj.options[obj.selectedIndex].value
Hinweis:
a: Die obige Methode wird wie diese Art von Methode obj.options.function() anstelle von obj.funciton geschrieben, da sie die Kompatibilität unter IE und FF berücksichtigen soll, wie z. B. obj.add() Nur gültig im IE.
b: Die Option in obj.option muss nicht großgeschrieben werden, und die Option in new Option muss großgeschrieben werden

2. Anwendung

Code kopieren

Der Code lautet wie folgt:

< script language="javascript">

function number(){
var obj = document.getElementById("mySelect"); new Option("my "My eat", "4"); //Den Wert der aktuell ausgewählten Option ändern
//obj.options.add(new Option("My eat", "4")); und dann eine Option hinzufügen
//alert(obj.selectedIndex);//zeigt die Seriennummer an, Option wird von selbst gesetzt
//obj.options[obj.selectedIndex].text = "My food"; Wert ändern
//obj.remove(obj.selectedIndex);Delete function
}

select id=" mySelect">
Meine Tasche
Mein Notizbuch Meine Belastung




1. Dynamisch erstellen




Code kopieren


Der Code lautet wie folgt:

function createSelect(){
var mySelect = document.createElement("select");

mySelect.id = "mySelect";

document.body.appendChild(mySelect); 2. Option hinzufügen

Code kopieren


Der Code lautet wie folgt:

Funktion addOption(){
//Objekte basierend auf ID suchen,
var obj = document.getElementById('mySelect');
//Option hinzufügen

obj.add(new Option("text","value")); .options.add(new Option("text","value")); //Dies ist kompatibel mit IE und Firefox

}
3. Option „Alle Optionen löschen“

Code kopieren

Der Code lautet wie folgt:

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

4 eine Optionsoption

Code kopierenDer Code lautet wie folgt:

Funktion removeOne( ){
var obj=document.getElementById('mySelect');
//index, die Seriennummer der zu löschenden Option, hier nehmen Sie die Seriennummer der aktuell ausgewählten Option
var index= obj.selectedIndex;
obj.options.remove( index);


5 >

Code kopieren


Der Code lautet wie folgt:

var obj=document.getElementById('mySelect'); selectedIndex; //Seriennummer, nimm die Seriennummer der aktuell ausgewählten Optionvar val = obj.options[index].value;

Den Text der Option abrufen

Code kopieren

Der Code lautet wie folgt:

var obj=document.getElementById(' mySelect'); var index=obj.selectedIndex; //Seriennummer, nimm die Seriennummer der aktuell ausgewählten Option var val = obj.options[index].text

7. Option ändern

Code kopieren

Der Code lautet wie folgt:

var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //Seriennummer, nimm die aktuell ausgewählte Option Die Seriennummervar val = obj.options[index]=new Option("neuer Text", "neuer Wert");

8. Auswahl löschen

Code kopieren

Der Code lautet wie folgt:

function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

change="choice()">

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

复制代码

代码如下:

/**
* @description 構件聯動下拉清單(用JQUERY 的AJAX配合JSON實作)
* @prarm selectId 下拉清單的ID
* @prarm method 要呼叫的方法名稱
* @prarm tempage>* @prarm method 要呼叫的方法名稱
* @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 data = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description 將JSON資料轉換成HTML資料格式
* @prarm selectId 下拉清單的ID
* @prarm nodeArray 傳回的JSON陣列
*
*/
function coverJsonToHtml(selectId,nodeArray){
//get select
var Select=$ j("#" selectId);
//clear select value
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i//create select Option
tempOption= $j('' nodeArray[i].mc ' ' );
//put Option to select
tempSelect.append(tempOption);
}
// 取得退化構件清單
getCpgjThgl(selectId,'thgjDm');
getCpgjThgl(selectId,'thgjDm');
/**
* @description 清空下拉清單的值
* @prarm selectId 下拉清單的ID
* @prarm index 開始清空的下標位置
*/
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!=index){
//長度是在變化的，因為必須重新取得
length=document.getElementById(selectId).options.length;
for(var i=index;i document.getElementById(selectId).options.remove(i);
length=length/2;
}
}
/**
* @description 取得退化構件清單
* @prarm selectId1 引用軟體下拉清單的ID
* @prarm selectId2 退化構件下拉清單的ID
*/
function getCpgjglse( selectId2){
var obj1=document.getElementById(selectId1);//引用軟體下拉清單
var obj2=document.getElementById(selectId2);//退化構件下拉清單
var oplentions .length;
//當引用軟體列表長度等於1時返回，不做操作
if(len==1){
return false;
}
//清空下拉列表的值，兩種方式都可以
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;ivar option= obj1.options[i];
//引用軟體被選取項目不加入
if(i!=obj1.selectedIndex){
//克隆OPTION並加入到SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}

HTML代碼:

HTML代碼:

複製代碼

代碼如下:

*引用軟體：	onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm' 'linkageTree','1');" value="選擇...">
*引用分版：
退化構件：	無