Compréhension et utilisation de base du HTML, sélectionnez option_HTML/Xhtml_Production de pages Web

Explication détaillée du HTML (sélectionnez l'option) en javascript
1 Compréhension de base :

Copier le code

Le code est le suivant :

var e = document.getElementById("selectId");
e. options= new Option("text","value"); 🎜>//Créer un objet option, c'est-à-dire créer un ou plusieurs text
//options est un tableau, qui peut stocker plusieurs tag value="value">Text Balises comme celle-ci

1:options[ ]Attributs du tableau :
attribut de longueur------- --Attribut de longueur
attribut selectedIndex--------La valeur d'index du texte dans la case actuellement sélectionnée Cette valeur d'index est automatiquement allouée par la mémoire (0,1,2,3...) correspondant à (N° Une valeur de texte, une deuxième valeur de texte, une troisième valeur de texte, une quatrième valeur de texte...)
2 : Attributs d'une seule option (---obj.options[ obj.selecedIndex] est un < spécifié ;option>, qui est un ---)
attribut de texte--------retourne/spécifie le texte
attribut de valeur------ Renvoie/spécifie une valeur, cohérente avec < ;options valeur="...">.
attribut index-------renvoie l'indice,
attribut sélectionné-------renvoie/spécifie si l'objet est sélectionné En spécifiant vrai ou faux, l'élément sélectionné peut être modifié dynamiquement.
attribut defaultSelected-----Renvoie si l'objet est sélectionné par défaut. vrai/faux.
3 : méthode d'option
Ajouter une balise -----obj.options.add(new("text","value"));
supprimer une < ;option> label-----obj.options.remove(obj.selectedIndex)
Obtenir le texte d'un text
Modifier la valeur d'une balise -----obj.options[obj.selectedIndex]=new Option("New Text","New Value")Supprimer toutes les balises -----obj.options.length = 0
Obtenir la valeur d'une balise -----obj.options[obj.selectedIndex].value
Remarque :
a : La méthode ci-dessus est écrite comme ce type de méthode obj.options.function() au lieu de obj.funciton, car il s'agit de considérer la compatibilité sous IE et FF, comme obj.add() est valable uniquement dans IE.
b : L'option dans obj.option n'a pas besoin d'être en majuscule, et l'option dans la nouvelle Option doit être en majuscule

2. Application

Copier le codeLe code est le suivant :

select id=" mySelect">
Mon sac
Mon carnet Mon fardeau






1. Créer dynamiquement une sélection

Copier le code


Le code est le suivant :

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

2. Ajouter une option

Copier le code

Le code est le suivant :

function addOption(){

//Trouver des objets en fonction de l'identifiant, var obj = document.getElementById('mySelect'); //Ajouter une optionobj.add(new Option("text","value")); //Ceci n'est valable que dans IEobj .options.add(new Option("text","value")); //Ceci est compatible avec IE et Firefox

}

3. Option Supprimer toutes les options

Copier le code

Le code est le suivant :

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

4. une option option

Copier le code

Le code est le suivant :

fonction RemoveOne( ){
var obj=document.getElementById('mySelect');
//index, le numéro de série de l'option à supprimer, prenez ici le numéro de série de l'option actuellement sélectionnée
var index= obj.selectedIndex;
obj.options.remove( index);

5. Obtenez la valeur de l'option

Copier le code Le code est le suivant :

var obj=document.getElementById('mySelect');

var index=obj. selectedIndex; //Numéro de série, prend le numéro de série de l'option actuellement sélectionnée
var val = obj.options[index].value


Obtenir le texte de l'option option

Copier le code

Le code est le suivant :

var obj=document.getElementById(' mySelect');

var index=obj.selectedIndex; //Numéro de série, prend le numéro de série de l'option actuellement sélectionnée

var val = obj.options[index].text; 🎜>7. Modifier l'option

Copier le code

Le code est le suivant :

var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //Numéro de série, prends l'option actuellement sélectionnée Le numéro de sérievar val = obj.options[index]=new Option("nouveau texte","nouvelle valeur");

8. Supprimer la sélection

Copier le code

Le code est le suivant :

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






function $(id)
{
return document.getElementById(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海"))
var myOption1= document.createElement("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
function choix()
{
var index=$("area").selectedIndex;
var val=$("area").options[index].getAttribute("value")
if(val==10)
{
var i=$("context") .childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement("select")
sh.add(new Option("浦东新区","101"))
sh.add( new Option("浦区","102"))
sh.add(new Option("徐汇区","103"))
sh.add(new Option("普陀区","104 "))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").childNodes. longueur-1 ;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement("select")
nj.add(new Option("玄武区","201"))
nj.add( new Option("白下区","202"))
nj.add(new Option("下关区","203"))
nj.add(new Option("栖霞区", "204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context") .childNodes.length-1;
alert(x)
}
function remove()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}

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="選擇...">
*引用分版：
退化構件：	無