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

来源: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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類