js 操作select和option常用程式碼整理_基礎知識

1、獲取選中select的value和text,html代碼如下：

複製代碼 代碼如下:

one
two
three

則可透過以下script代碼s來取得選取的value和text

複製程式碼 程式碼如下:

$("#mySelect").val(); //取得選取記錄的value值
$("#mySelect option:selected").text(); //取得選取記錄的text值

2、運用new Option("文本","值")方法添加選項option

複製代碼 代碼如下:

var obj = document.getElementById("mySelect");obj.add(new Option("4","4"));

3、刪除所有選項option

複製程式碼 程式碼如下:

var obj = document.ElementBy. );obj.options.length = 0;

4、刪除選取選項option

複製碼> 程式碼如下: var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options.remove(index);

5、修改選取選項option

複製程式碼

複製程式碼

複製碼

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option("three",3); //更改對應的值
obj.options[index].selected = true; //保持選取狀態

6、刪除select

複製程式碼 程式碼如下:

var obj = document.getElementById("mySelect");
obj.ChioNode.removemet. (obj); //移除目前物件

7、select選擇的回應事件

複製程式碼 程式碼如下:

$("#mySelect").change(function(){ //新增所需執行的運算元})

1.動態建立select

複製程式碼 程式碼如下:

程式碼如下:


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

mySelect.id = "mySelect";
document.body.appendChild(mySelect); }

2.新增選項option

複製程式碼

複製程式碼



複製程式碼

複製程式碼

複製程式碼複製碼🎜>

function addOption(){

//根據id找出對象，
var obj=document.getElementByIdx_x('mySelect');
//新增一個選項
obj .add(new Option("文字","值")); //這個只能在IE中有效
obj.options.add(new Option("text","value")); //這個相容IE與firefox
}

3.刪除所有選項option 複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製碼🎜> 程式碼如下: function removeAll(){ var obj=document.getElementByIdx_x('mySelect'); obj.options.obj.options }
4.刪除一個選項option

複製程式碼 程式碼如下:

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

5.取得選項option的值

複製程式碼 程式碼如下:

var obj=document.getElementByIdx_x('mySelect');
var. ; //序號，取目前選取選項的序號
var val = obj.options[index].value;

6.取得選項option的文字

6.取得選項option的文字 複製程式碼

程式碼如下:


var obj=document.getElementByIdx_x('mySelectx_x('myun'); >var index=obj.selectedIndex; //序號，取目前選取選項的序號

var val = obj.options[index].text;

7.修改選項option

複製程式碼

程式碼如下:


var obj=document_Letmy> ');
var index=obj.selectedIndex; //序號，取目前選取選項的序號

var val = obj.options[index]=new Option("新文字","新值");

8.刪除select

複製程式碼

複製程式碼



複製程式碼

複製程式碼

複製程式碼複製程式碼

複製碼> function removeSelect(){ var mySelect = document.getElementByIdx_x("mySelect"); mySelect.parentNode.removeChild(mySelect); } } } } } } 🎜>整個實例的完整程式碼如下： 複製程式碼 程式碼如下:

函數$(id)
{
return document.getElementByIdx_x(id)
}
function show()
{
var selectObj=$("area")
var =document.createElement_x("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_x("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_x("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)
}
;

選擇>

身體>