根據select標籤設定預設選取的選項方法該怎麼做？

下面我就為大家分享一篇select標籤設定預設選取的選項方法，具有很好的參考價值，希望對大家有幫助。

方法有兩種。

第一種透過的屬性來設定選取項，此方法可以在動態語言如php在後台根據需要控制輸出結果。

< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >

第二種 為透過前端js控制選取的項目：

< script type = "text/javascript" >
function change(){
  document.getElementById("sel")[2].selected=true;
}
</ script >
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" >2</ option >
< option value = "3" >3</ option >
</ select >
< input type = "button" value = "修改" onclick = "change()" />

取得

標籤選取項目文字的js程式碼為:

var val = document.all.Item.options[document.all.Item.selectedIndex].text
var i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value;

一些其它操作標籤的技巧如下：

#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);
}

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

透過axios發送post請求發現springMVC接收不到參數問題（詳細教學）

透過vue實作新增axios元件,解決post傳參數為null方面的問題（詳細教學）

#在vue中透過axios處理post請求傳參的問題（詳細教學）

以上是根據select標籤設定預設選取的選項方法該怎麼做？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

select 設定 預設

來源：php.cn

上一篇：怎樣利用Vue動態產生form表單 下一篇：怎樣使用JS中console['']輸入方法

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

• 在weebox中有關彈出視窗不居中問題
  2018-06-23 18:19:43
• 在vue+canvas中有關excel-like元件如何使用
  2018-06-23 18:17:39
• 在JavaScript中有關class如何調用
  2018-06-23 18:11:37
• 使用Vue框架如何實現上拉刷新功能
  2018-06-23 18:10:14
• 使用Vue行動端如何實現圖片裁切組件
  2018-06-23 18:06:43
• 有關微信小程式模板和模組化用法（詳細教程）
  2018-06-23 18:04:28
• 在vue2中如何實現上拉載入功能
  2018-06-23 18:02:45
• 使用Vue2如何實現三級連動
  2018-06-23 18:00:45
• 在vue2中如何實作資料請求顯示loading圖
  2018-06-23 17:58:23
• 使用元素全螢幕如何做到設定與監聽
  2018-06-23 17:56:41

最新問題

更改時如何將鍵作為 v-for 的選擇選項值傳遞（VueJS） 我正在使用Vue3和Bootstrap5。我有一個select有多個選項。現在我正在顯示我的option.TEXT，當我更改某些內容時，這個value也將被傳遞到我的方法中。但當我...

來自於 2023-11-17 08:55:24

0

1

276

更新時阻止 MySQL 讀取 我有兩個簡單的查詢，一個是讀取表，一個是更新表。如何在更新查詢執行時間鎖定選擇查詢的讀取。現在在MySQLInnoDB中，我注意到寫入/更新預設是鎖定的，但讀取/選擇在事務之前取得...

來自於 2023-11-07 18:05:53

0

1

203

使用PHP取得CSV導出（MYSQL）的列名和數據 我需要一種透過PHP將MYSQL資料庫匯出到CSV的方法，但我還需要選擇列名稱。到目前為止，我有以下內容，除了獲取列名稱之外，它可以完成我需要的一切。 echo"Expo...

來自於 2023-11-04 21:59:58

0

2

279

MySQL：如何對 ORDER BY 子句使用 CASE 我有一個存儲過程，它必須在根據輸入過濾行後返回一個表。其中兩個輸入是sort_column和sort_dir。查詢必須在sort_dir方向（ASC或DESC）中ORDERBYso...

來自於 2023-11-01 17:44:15

0

1

171

重新表述的標題為：使用雙引號的 MySQL 表名 我正在執行一個mysql查詢，如下所示：Select*from"User";它返回：您的SQL語法有錯誤；檢查與您的MySQL伺服器版本相對應的手冊，以了解在第...

來自於 2023-10-24 22:39:00

0

1

301

相關專題

更多>

• Spring MVC是什麼
• 如何使用雲端儲存
• vb中怎麼連接access資料庫
• winntbbu.dll遺失怎麼修復
• 電腦開機顯示輸入不支援解決方法
• vt怎麼開啟
• 電腦軟體系統包括
• drivermanager.getconnection

熱門推薦

• js是什麼意思
• js怎麼將字串轉為陣列？
• javascript如何刷新頁面
• js數組怎麼刪除某一項
• sqrt函數怎麼使用

熱門教學

更多>

相關教學

熱門推薦

最新課程

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1403344
• 
  php入門教程之一週學會PHP

  4231577
• 
  JAVA 初級入門影片教學

  2419450
• 
  小甲魚零基礎入門學習Python影片教學

  498313
• 
  PHP 零基礎入門教學

  834143

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1403344次學習
• 
  JAVA 初級入門影片教學

  2419450次學習
• 
  小甲魚零基礎入門學習Python影片教學

  498313次學習
• 
  Web前端開發極速入門

  214198次學習
• 
  零基礎精通 PS 影片教學

  859128次學習

• 
  【web前端】Node.js快速入門

  4689次學習
• 
  國外Web開發全端課程全集

  3632次學習
• 
  Go語言實戰之 GraphQL

  3121次學習
• 
  550W粉絲大佬手把手從零學JavaScript

  561次學習
• 
  python大神Mosh，零基礎小白6小時完全入門

  16129次學習

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

• [表單按鈕] jQuery企業留言表單聯絡程式碼
• [播放器特效] HTML5 MP3音樂盒播放特效
• [選單導航] HTML5酷炫粒子動畫導覽選單特效
• [表單按鈕] jQuery可視化表單拖曳編輯程式碼
• [播放器特效] VUE.JS仿酷狗音樂播放器代碼
• [html5特效] 經典html5推箱子小遊戲
• [圖片特效] jQuery滾動添加或減少圖片特效
• [相簿特效] CSS3個人相簿封面懸停放大特效

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

• [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
• [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
• [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
• [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
• [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
• [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
• [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
• [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

關於我們 免責聲明 Sitemap

PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！