茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1498570 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
FF18_Paintcar_00022.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]Javascript 操作select控件大全(新增、修改、刪除、選中、清空、判斷存在等)

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]Javascript 操作select控件大全(新增、修改、刪除、選中、清空、判斷存在等)

Javascript 操作select控件大全(新增、修改、刪除、選中、清空、判斷存在等)

Posted on 2007-08-08 14:56 禮拜一 閱讀(16254)
 1 判斷select選項中 是否存在Value="paraValue"的Item 
 2 向select選項中 加入一個Item 
 3
從select選項中 刪除一個Item 
 4 刪除select中選中的項 
 5 修改select選項中 value="paraValue"的text為"paraText" 
 6 設置select中text="paraText"的第一個Item為選中 
 7 設置select中value="paraValue"的Item為選中 
 8
得到select的當前選中項的value 
 9 得到select的當前選中項的text 
10 得到select的當前選中項的Index 
11 清空select的項 


js 代碼
//  1.判斷select選項中 是否存在Value="paraValue"的Item        

function  jsSelectIsExitItem(objSelect, objItemValue)  {        

    
var  isExit  =   false ;        

    
for  ( var  i  =   0 ; i  <  objSelect.options.length; i ++
{        

        
if  (objSelect.options[i].value  ==  objItemValue) 
{        
            isExit 
=   true ;        
            
break ;        
        }
        

    }
        
    
return  isExit;        
}
         
   
//  2.向select選項中 加入一個Item        

function  jsAddItemToSelect(objSelect, objItemText, objItemValue) 
{        
    
// 判斷是否存在        

     if  (jsSelectIsExitItem(objSelect, objItemValue)) 
{        
        alert(
" 該Item的Value值已經存在 " );        

    }
  else  
{        
        
var  varItem  =   new  Option(objItemText, objItemValue);      

        objSelect.options.add(varItem);     
        alert(
" 成功加入 " );     
    }
        
}
        

   
//  3.從select選項中 刪除一個Item        

function  jsRemoveItemFromSelect(objSelect, objItemValue)  {        

    
// 判斷是否存在        

     if  (jsSelectIsExitItem(objSelect, objItemValue))  {        

        
for  ( var  i  =   0 ; i  <  objSelect.options.length; i ++
{        

            
if  (objSelect.options[i].value  ==  objItemValue) 
{        
                objSelect.options.remove(i);        
                
break ;        
            }
        

        }
        
        alert(
" 成功刪除 " );        

    }
  else   {        

        alert(
" 該select中 不存在該項 " );        
    }
        
}
    
   
   

//  4.刪除select中選中的項    
function
 jsRemoveSelectedItemFromSelect(objSelect)  {        
    
var  length  =  objSelect.options.length  -   1 ;    

    
for ( var  i  =
 length; i  >=   0 ; i -- ) {    

        
if (objSelect[i].selected  ==   true
) {    
            objSelect.options[i] 
=   null ;    
        }
    

    }
    
}
      
   
//  5.修改select選項中 value="paraValue"的text為"paraText"        

function  jsUpdateItemToSelect(objSelect, objItemText, objItemValue) 
{        
    
// 判斷是否存在        

     if  (jsSelectIsExitItem(objSelect, objItemValue)) 
{        

        
for  ( var  i  =   0 ; i  <  objSelect.options.length; i ++
{        

            
if  (objSelect.options[i].value  ==  objItemValue) 
{        
                objSelect.options[i].text 
=  objItemText;        
                
break ;        
            }
        

        }
        
        alert(
" 成功修改 " );        

    }
  else   {        

        alert(
" 該select中 不存在該項 " );        
    }
        
}
        
   
//
 6.設置select中text="paraText"的第一個Item為選中        
function
 jsSelectItemByValue(objSelect, objItemText)  {            
    
// 判斷是否存在        
     var
 isExit  =   false ;        

    
for  ( var  i  =   0 ; i  <  objSelect.options.length; i ++
{        

        
if  (objSelect.options[i].text  ==  objItemText) 
{        
            objSelect.options[i].selected 
=   true ;        
            isExit 
=   true ;        
            
break ;        
        }
        
    }
              
    
// Show出結果        

     if  (isExit) 
{        
        alert(
" 成功選中 " );        

    }
  else  
{        
        alert(
" 該select中 不存在該項 " );        
    }
        

}
        
   
//  7.設置select中value="paraValue"的Item為選中    
document.all.objSelect.value  =  objItemValue;    
       

//  8.得到select的當前選中項的value    
var  currSelectValue  =  document.all.objSelect.value;    
       
//  9.得到select的當前選中項的text    

var  currSelectText  =  document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    
       
//  10.得到select的當前選中項的Index    
var  currSelectIndex  =
 document.all.objSelect.selectedIndex;    
       
//  11.清空select的項    
document.all.objSelect.options.length  =   0 ;   


原文出處:Javascript 操作select控件大全(新增、修改、刪除、選中、清空、判斷存在等) - 成為自己比什麼都重要!
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]JavaScript 對 Select 的操作

JavaScript對Select的操作

1.動態創建select

function createSelect(){

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

2.添加選項option

function addOption(){

//根據id查找對象,
var obj=document.getElementById('mySelect');

//添加一個選項
obj.add(new Option("文本","值"));
}

3.刪除所有選項option

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

obj.options.length=0;

}

4.刪除一個選項option

function removeOne(){
var 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);
}


來源:CSDN

原文出處:JavaScript对Select的操作
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]利用 javascript 取得 select option 選單的 value // select option value

2008年4月17日 星期四

利用 javascript 取得 select option 選單的 value // select option value
javascript


<head>
<title>無標題文件</title>
<script language="javascript">
// 以下宣告用來取得每個 選單 所代表的名稱
function ITEMDATA(obj)
{
window.alert("選單名稱:"+obj.name);
alert("選擇項目: Value:"+obj.options[obj.selectedIndex].value+" -
Text:"+obj.options[obj.selectedIndex].text);
} // 結束 ITEMDATA 函式
</script>
</head>

<body>
<form>
<select name="SEL01" style="font-size:14px" onChange="ITEMDATA(this)">
<option value="V1" >選單一</option>
<option value="V2" >選單二</option>
<option value="V3" >選單三</option>
<option value="V4" >選單四</option>

</select>

<select name="SEL02" style="font-size:14px" onChange="ITEMDATA(this)">

<option value="V1" >選單一</option>
<option value="V2" >選單二</option>
<option value="V3" >選單三</option>
<option value="V4" >選單四</option>
</select>

<select name="SEL03" style="font-size:14px" onChange="ITEMDATA(this)">
<option value="V1" >選單一</option>
<option value="V2" >選單二</option>
<option value="V3" >選單三</option>
<option value="V4" >選單四</option>
</select>
.
.
.
</form>
</body>
</html>


原文出處:wotupset的網誌 : 利用 javascript 取得 select option 選單的 value // select option value javascript
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[分享]利用 javascript 使得 select option 可以像 Windows 物件一樣『跳躍至按鍵所決定之選項』
冷日:
在 Windows 物件中,下拉選單有個功能,就是可以在使用者輸入任意按鍵時,直接跳至以該按鍵為開頭的那個選項!
在 Web 因為下拉選單本身沒有輸入的功能,所以這個功能冷日一直覺得很可惜!
近日因為客人要求,所以透過 JavaScript 思維了一下這個功能,原型是這個『可供使用者任意輸入顯示與值的下拉選單』:
</SCRIPT>
  function userSelectInput( object2Edit ){	//提供下拉選單使用者可以自己入資料的功能
    object2Edit.options[0] =
      new Option(
        ok = ( object2Edit.options[0] ) ? object2Edit.options[0].innerText + String.fromCharCode(event.keyCode) : String.fromCharCode(event.keyCode) ,
        ok = ( object2Edit.options[0] ) ? object2Edit.options[0].innerText + String.fromCharCode(event.keyCode) : String.fromCharCode(event.keyCode) );
    object2Edit.selectedIndex = 0;
  }
</SCRIPT>
<select id="test1" onkeypress="(script removed)userSelectInput( this );" >
<option value=""></option>
<option value="a1">a1</option>
<option value="b2">b2</option>
<option value="c3">c3</option>
<option value="c4">c4</option>
</select>

說明:
上述這一段測試,主要是讓一個 Select 物件可以讓使用者任意輸入資料,資料的顯示(Text)與值(Value)都是使用者輸入的!
並且利用 Select 物件第一個 Option 是空白把使用者輸入的資料塞再該位置,應用的話,您可以把 Select 物件不斷往後擴充(增加 Select 物件的長度)

基於上述的原型,冷日就順手把怨念已久的『跳躍至按鍵所決定之選項』Select 物件也給做出來了:
<script>
  function changeSelectIndex( obj2change ) { //使用者輸入一碼則會直接跳至以該碼為首的選項
    for ( var i = 0 ; i < obj2change.options.length ; i ++ ) {
      if ( obj2change.options[i].text == String.fromCharCode(event.keyCode) ) {
        obj2change.options[i].selected = true ;
        break ;
      }
    }
  }
</script>
<select id="test2" onkeypress="(script removed)changeSelectIndex( this );" >
<option value=""></option>
<option value="a1">a1</option>
<option value="b2">b2</option>
<option value="c3">c3</option>
<option value="c4">c4</option>
</select>

說明:
事實上原裡很簡單!就是在 Select 物件上增加 onkeypress 這個 event 以掌握使用者輸入。
然後把使用者輸入去 Select 物件裡面走訪一次,看誰符合就把 selected 給設為 True!

這兩個 JavaScript Code 雖然簡單,但是卻讓 Web 上的 Select 物件好用不少,真誠的推薦給大家!
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|