首頁 >web前端 >html教學 >HTML select option基礎瞭解及使用 _HTML/Xhtml_網頁製作

HTML select option基礎瞭解及使用 _HTML/Xhtml_網頁製作

WBOY
WBOY原創
2016-05-16 16:40:241599瀏覽

javascript之HTML(select option)詳解
一、基本理解:

複製程式碼
複製程式碼



複製程式碼


複製程式碼



複製碼>程式碼如下:


var e = document.getElementById("selectId");
e. options= new Option("文字","值") ;
//建立建立一個option物件,即在
我的本本



1.動態創建select




複製程式碼
程式碼如下: function createSelectf. var mySelect = document.createElement("select"); mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}


2.新增選項option





複製程式碼
程式碼如下: function addOption({unction 🎜>//根據id找出對象, var obj=document.getElementById('mySelect'); //新增一個選項obj.add(new Option("文字","值") ); //這個只能在IE中有效obj.options.add(new Option("text","value")); //這個相容IE與firefox }
3.刪除所有選項option

複製代碼
代碼如下:

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

4.刪除一個選項

複製程式碼
程式碼如下:

function removee() obj=document.getElementById('mySelect');
//index,要刪除選項的序號,這裡取目前選取選項的序號
var index=obj.selectedIndex;
obj.options.remove( index);
}

5.獲得選項option的值


複製代碼程式碼如下:
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序號,取目前選取選項的序號
var val = obj.options[index].value;

6.取得選項option的文字


複製程式碼
複製程式碼


複製碼

程式碼如下:


var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序號,取目前選取選項的序號
var val = obj.options[index].text; 7.修改選項option


複製程式碼

程式碼如下:


var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序號,取目前選取選項的序號
var val = obj.options[index]=new Option("新文字","新值"); 8.刪除select
複製程式碼程式碼如下:

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= Element. ("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption) }
函數choice()
{
var index=$("area").selectedIndex;
var val=$("區域").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.高度-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement("select") 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)
}
函數刪除( )
{
var i=$("context").childNodes.length-1
var remobj=$("context").childNodes[i]
remobj.removeNode(true)
}
;


change="choice()"上選擇id="area" >
選擇>




身體>


根據這些東西,自己用JQEURY AJAX JSON實作了一個小功能如下:
JS程式碼:(只取了於SELECT相關的程式碼)


複製程式碼程式碼如下:

/**
* @description コンポーネント連携ドロップダウンリスト(JQUERYのAJAXとJSONを使用して実装)
* @prarm selectId ドロップダウンリストのID
* @prarmメソッド 呼び出すメソッド名
* @prarm temp this ソフトウェアIDを
に格納* @prarm url ジャンプ先のアドレス
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//Use get メソッドはバックエンドにアクセスします
dataType: "json",//データを json 形式で返します
url: url,//アクセスするバックエンド アドレス
data: "method=" method "&temp= " temp, //送信されるデータ
成功: function(msg){//msg は返されたデータです。ここでデータ バインディングを行います
var data = msg.lists;
coverJsonToHtml(selectId,data) ;
}
});
}
/**
* @description JSON データを HTML データ形式に変換します
* @prarm selectId ドロップダウン リストの ID
* @pram nodeArray 返される JSON 配列
*
*/
function coverJsonToHtml(selectId,nodeArray){
//get select
var tempSelect= $ j("#" selectId);
//選択値をクリア
isClearSelect(selectId,'0');
for(var i=0;i//create select Option
tempOption= $j('


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

< ;/tr>





*ソフトウェアの引用: onClick=" linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');"選択...">
*引用バージョン:


name="thgjDm" style="width:160" id="thgjDm">

;/td>


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn