深入理解表單腳本系列第四篇——選擇框腳本

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/09/16/5877287.html
-Advertisement-
Play Games

[1]select [2]option [3]添加選項 [4]移除選項 ...


×
目錄
[1]select [2]option [3]添加選項[4]移除選項

前面的話

　　選擇框是通過<select>和<option>元素創建的，又稱為下拉列表框。為了方便與這個控制項交互，除了所有表單欄位共有的屬性和方法外，javascript還提供了一些屬性和方法。本文將詳細介紹選擇框腳本

 

<select>

　　首先介紹關於<select>元素的相關屬性

multiple

　　multiple屬性表示是否允許多項選擇

<select name="test" id="test">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<button id="btn">是否多選</button>
<script>
btn.onclick = function(){
    test.multiple = !test.multiple;
}    
</script>

type

　　選擇框的type屬性有兩種，一種是'select-one'，表示單選；另一種是'select-multiple'，表示多選

<select name="test" id="test">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<button id="btn">是否多選</button>
<div id="result"></div>
<script>
btn.onclick = function(){
    test.multiple = !test.multiple;
    result.innerHTML = test.type;
}    
</script>

value

　　選擇框的value屬性由當前選中項決定

　　1、如果沒有選中的項，則選擇框的value屬性保存空字元串

　　2、如果有一個選中項，而且該項的value特性已經在HTML中指定，則選擇框的value屬性等於選中項的value特性。即使value特性的值是空字元串，也同樣遵循此條規則

　　3、如果有一個選中項，但該項的value特性在HTML中未指定，則選擇框的value屬性等於該項的文本

　　4、如果有多個選中項，則選擇框的value屬性將依據前兩條規則取得第一個選中項的值

　　[註意]IE8-瀏覽器只支持value屬性的值，不支持選擇的文本值

<select name="test" id="test">
    <option value="a">1</option>
    <option value="b">2</option>
    <option>3</option>
</select>
<button id="btn1">是否多選</button>
<button id="btn2">獲取value值</button>
<div id="result"></div>
<script>
btn1.onclick = function(){
    test.multiple = !test.multiple;
}    
btn2.onclick = function(){
    result.innerHTML = test.value;
}
</script>

selectedIndex

　　selectedIndex屬性返回基於0的選中項的索引，如果沒有選中項，則值為-1。對於支持多選的控制項，只保存選中項中第一項的索引

<select name="test" id="test">
    <option value="a">1</option>
    <option value="b">2</option>
    <option>3</option>
</select>
<button id="btn1">是否多選</button>
<button id="btn2">獲取索引</button>
<div id="result"></div>
<script>
btn1.onclick = function(){
    test.multiple = !test.multiple;
}    
btn2.onclick = function(){
    result.innerHTML = test.selectedIndex;
}
</script>

size

　　size屬性表示選擇框的可見行數

<select name="test" id="test">
    <option value="a">1</option>
    <option value="b">2</option>
    <option>3</option>
</select>
<button id="btn1">可見1行</button>
<button id="btn2">可見2行</button>
<button id="btn3">可見3行</button>
<div id="result"></div>
<script>
btn1.onclick = function(){
    test.size = 1;
}    
btn2.onclick = function(){
    test.size = 2;
}
btn3.onclick = function(){
    test.size = 3;
}
</script>

options

　　options屬性表示控制項中所有的<option>元素

<select name="test" id="test">
    <option value="a">1</option>
    <option value="b">2</option>
    <option>3</option>
</select>
<script>
//[option, option, option, selectedIndex: 0]
console.log(test.options)
</script>

 

<option>

　　在DOM中，每個<option>元素都有一個HTMLOptionElement對象表示。為便於訪問數據， HTMLOptionElement對象也定義了一些屬性

　　[註意]IE瀏覽器不支持為<option>元素設置display:none

index

　　index屬性表示當前選項在options集合中的索引

label

　　label屬性表示當前選項的標簽

　　[註意]IE9-瀏覽器不支持

selected

　　selected屬性表示當前選項是否被選中。將這個屬性設置為true可以選中當前選項

text

　　text屬性表示選項的文本

value

　　value屬性表示選項的值

　　[註意]在未指定value特性的情況下，IE8會返回空字元串；而其他瀏覽器返回text屬性的值

<select name="test" id="test">
    <option value="a" selected>1</option>
    <option value="b">2</option>
    <option>3</option>
</select>
<script>
var option = test.options[0];
console.log(option.index);//0
console.log(option.label);//1，IE9-瀏覽器返回空字元串''
console.log(option.selected);//true
console.log(option.text);//1
console.log(option.value);//a
</script>

 

添加選項

　　【1】添加選項可以使用DOM的appendChild()或insertBefore()方法

<select name="test" id="test">
    <option>1</option>
    <option>3</option>
</select>
<button id="btn">增加選項2</button>
<script>
btn.onclick = function(){
    var newOption = document.createElement('option');
    newOption.innerHTML = 2;
    test.insertBefore(newOption,test.options[1]);
}
</script>

　　【2】可以使用選擇框的add()方法，add(newoption,reloption)方法向控制項中插入新<option>元素，其位置在相關項(reloption)之前

　　使用Option構造函數來創建新選項，接受兩個參數：文本(text)和值(value)，第二個參數可選

<select name="test" id="test">
    <option>1</option>
    <option>3</option>
</select>
<button id="btn">增加選項2</button>
<script>
btn.onclick = function(){
    var newOption = new Option('2');
    test.add(newOption,1);
}
</script>

 

移除選項

　　與添加選項類似，移除選項的方式也有很多種

　　【1】使用DOM的removeChild()方法

<select name="test" id="test">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<button id="btn">移除選項2</button>
<script>
btn.onclick = function(){
    test.removeChild(test.options[1]);
}
</script>

　　【2】使用選擇框的remove()方法。這個方法接受一個參數，即要移除選項的索引

　　[註意]使用該方法的好處是，若不存在被移除選項的索引，不會報錯，只是靜默失敗

<select name="test" id="test">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<button id="btn">移除選項2</button>
<script>
btn.onclick = function(){
    test.remove(1);
}
</script>

　　【3】將相應選項設置為null

　　[註意]該方法同樣不會報錯

<select name="test" id="test">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<button id="btn">移除選項2</button>
<script>
btn.onclick = function(){
    test.options[1] = null;
}
</script>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jquery-leonaScroll-1.1-自定義滾動條插件
    leonaScroll-1.1最新版-豎向 leonaScroll-1.1.js歡迎使用leonaScroll-1.1.js，此滾動條僅支持豎向滾動，如您在使用過程中發現更多問題，歡迎指正！ 更新：1.1版本1、修複了前面初始版本中的一些bug，比如不能自適應用戶的文本內容，css文件繁雜2、用戶只 ...
  • CSS3選擇器的研究，案例
    在上一篇CSS3選擇器的研究中列出了幾乎所有的CSS3選擇器，和偽類選擇器，當是並沒有做案例的研究，本想在那篇文章裡面寫，但想想如果把案例都寫在那篇文章裡面，對於查找來說就不是很方便，所有另開一篇來講實例。 屬性選擇器 [title]:選擇帶有title屬性的元素 [title='hello']:選 ...
  • jquery屬性，遍歷，HTML操作
    Jquery屬性遍歷、HTML操作。 Jquery擁有可操作HTML元素和屬性的強大方法。 下麵是我整理的一些jquery遍歷函數： .add() 將元素添加到匹配元素的集合中。 .andSelf() 把堆棧中之前的元素集添加到當前集合中。 .children() 獲得匹配元素集合中每個元素的所有子 ...
  • 聖杯佈局 雙飛翼佈局
    概述 要求：兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。 異同點：聖杯是採用left和right相對定位的方式；而雙飛翼是在center裡面又創建了一個子div，在該子div里用margin left和margin right為左右兩欄div留出位置。 聖杯佈局 雙飛翼佈局 ...
  • 利用select實現年月日三級聯動的日期選擇效果
    × 目錄 [1]演示 [2]規劃 [3]結構生成[4]演算法處理 前面的話 關於select控制項，可能年月日三級聯動的日期選擇效果是最常見的應用了。本文是選擇框腳本的實踐，下麵將對日期選擇效果進行詳細介紹 演示 規劃 預設情況下，年、月、日分別由3個select控制項組成，id分別為sel1，sel2， ...
  • jquery音樂播放器（歌詞滾動版）
    好久沒出來水了！！！忙忙碌碌的找工作~然後中秋節也算過了，祝各位coding們，直接覺醒第七感小宇宙，直接用心就能找到bug-_-// 最後如題這是一篇很正規的coding的文章 大概麽比以前的加了個歌詞，之前的炸了，然後最近又修好了，一直東西在搬家，這次估計不搬家了，大不了美橙在買幾個空間hoho ...
  • jquery檢查元素存在性
    javascript檢查元素存在性： 即使這個元素被刪除了，也不擔心javascript代碼報錯； jquery檢查元素存在性： 代碼如下： jquery $（“#preview”）獲取的永遠是對象，即使網頁上沒有此元素。 不能使用以下代碼： 因此要用jquery檢查某個元素在網頁上是否存在時，應該 ...
  • Html語義化理解
    1、什麼是HTML語義化？ <基本上都是圍繞著幾個主要的標簽，像標題（H1~H6）、列表（li）、強調（strong em）等等> 根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。 2、為什麼要語義化？ 為了在沒有CS ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類