發表者討論內容

冷日
(冷日) 發表時間：2011/9/11 8:10

Webmaster

註冊日: 2008/2/19
來自:
發表數: 15771

[分享]利用 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 物件好用不少，真誠的推薦給大家！ Good Job

回覆

平面展開

前一個主題 | 下一個主題 | |

| |

討論串

[轉貼]Javascript 操作select控件大全（新增、修改、刪除、選中、清空、判斷存在等） (冷日
(冷日), 2009/1/16 3:20)
[轉貼]JavaScript 對 Select 的操作 (冷日
(冷日), 2009/1/16 3:26)
[轉貼]利用 javascript 取得 select option 選單的 value // select option value (冷日
(冷日), 2009/1/16 3:34)
» [分享]利用 javascript 使得 select option 可以像 Windows 物件一樣『跳躍至按鍵所決定之選項』 (冷日
(冷日), 2011/9/11 8:10)

發表新主題

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

討論串