js 操作select和option常用程式碼整理

NO IMAGE

1、獲取選中select的value和text,html程式碼如下
複製程式碼 程式碼如下:
<select id=”mySelect”>
<option value=”1″>one</option>
<option value=”2″>two</option>
<option value=”3″>three</option>
</select>

則可通過以下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.getElementById(“mySelect”);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.parentNode.removeChild(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.length=0;
}

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 index=obj.selectedIndex; //序號,取當前選中選項的序號
var val = obj.options[index].value;

6.獲得選項option的文字
複製程式碼 程式碼如下:
var obj=document.getElementByIdx_x(‘mySelect’);
var index=obj.selectedIndex; //序號,取當前選中選項的序號
var val = obj.options[index].text;

7.修改選項option
複製程式碼 程式碼如下:
var obj=document.getElementByIdx_x(‘mySelect’);
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);
}

整個例項的完整程式碼如下
複製程式碼 程式碼如下:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//ZH-CN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”>
<head>
<script language=JavaScript>
function $(id)
{
return document.getElementByIdx_x(id)
}
function show()
{
var selectObj=$(“area”)
var myOption=document.createElement_x(“option”)
myOption.setAttribute(“value”,”10″)
myOption.appendChild(document.createTextNode(“上海”))
var myOption1=document.createElement_x(“option”)
myOption1.setAttribute(“value”,”100″)
myOption1.appendChild(document.createTextNode(“南京”))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
function choice()
{
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_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.length-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)
}
function remove()
{
var i=$(“context”).childNodes.length-1;
var remobj=$(“context”).childNodes[i];
remobj.removeNode(true)
}
</script>
<body>
<div id=”context”>
<select id=”area” onchange=”choice()”>
</select>
</div>
<input type=button value=”顯示” onclick=”show()”>
<input type=button value=”計算結點” onclick=”calc()”>
<input type=button value=”刪除” onclick=”remove()”>
</body>
</html>

改進版:在select中新增、修改、刪除option元素
複製程式碼 程式碼如下:
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i ){
var word = document.createElement_x(“OPTION”);
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement_x(“OPTION”);
word.text = f.word.value;
f.keywords.add(word);
}

但上述 add() 方法只在IE下有效,為相容FF和Opera,對上述程式碼進行了一下改進,改動後程式碼如下:
複製程式碼 程式碼如下:
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i ){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementByIdx_x(“MySelect”)[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}

整個例項的完整程式碼如下
複製程式碼 程式碼如下:
<!doctype html public “-//w3c//dtd html 4.0 transitional//en”>
<html>
<head>
<title>javascript select options text value</title>
<meta name=”keywords” content=”javascript select options text value add modify delete set”>
<meta name=”description” content=”javascript select options text value add modify delete set”>
<script language=”javascript”>
<!–
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i ){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementByIdx_x(“MySelect”)[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ // 編輯
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 刪除
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 儲存
var set = “”;
for(var i=0; i<f.keywords.length; i ){
set = f.keywords[i].text “;”;
}
confirm(set);
}
//–>
</script>
</head>
<body>
<form name=”watch” method=”post” action=””>
<select id=”MySelect” name=”keywords” size=”10″ onchange=”watch_sel(this.form)”></select><br>
<script language=”javascript”>
<!–
watch_ini(“我”,”你”,”妳”,”他”,”她”,”它”,”爾”); // 初始關鍵詞
//–>
</script>
<input type=”text” name=”word” /><br />
<input type=”button” value=”增加” onclick=”watch_add(this.form);” />
<input type=”button” value=”修改” onclick=”watch_mod(this.form);” />
<input type=”button” value=”刪除” onclick=”watch_del(this.form);” />
<input type=”button” value=”儲存” onclick=”watch_set(this.form);” />
</form>

用一個字串建立一個陣列方法:
複製程式碼 程式碼如下:
<script language=”javascript”>
</body>
</html>
<script>
function spli(){
datastr=”2,2,3,5,6,6″;
var str= new Array();
str=datastr.split(“,”);
for (i=0;i<str.length ;i )
{ document.write(str[i] “<br/>”); }
}
spli();
</script

今天除錯了一段js,在ie上執行良好,在火狐上除錯出現錯誤,查資料發現
複製程式碼 程式碼如下:
obj.add(new Option(“文字”,”值”)); //這個只能在IE中有效
obj.options.add(new Option(“text”,”value”)); //這個相容IE與firefox

因為這段程式碼,在網上查資料收藏了這篇文章,實時的溫故js
共勉!

您可能感興趣的文章:

js實現可輸入可選擇的select下拉框Angularjs實現帶查詢篩選功能的select下拉框示例程式碼JS元件Bootstrap Select2使用方法解析js自定義select下拉框美化特效angularjs 實現帶查詢篩選功能的select下拉框例項javascript Select標記中options操作方法集合JS元件Bootstrap Select2使用方法詳解javascript操作select參考程式碼js select多選列表傳值程式碼JS獲取select-option-text_value的方法JS操作select下拉框動態變動(建立/刪除/獲取)js select option物件小結JavaScript實現的select點菜功能示例