html中关于<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);
}

Atas ialah kandungan terperinci html中关于<select>标签如何设置默认选中的选项详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

html select 如何

sumber：php.cn

Artikel sebelumnya：html页面中如何实现保留空格以及换行符的实例分析 Artikel seterusnya：怎样零基础学习前端开发

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• 从零开始打造自己的PHP框架的视频资料
  2023-03-15 16:54:01
• PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析
  2023-03-15 12:26:02
• php中关于IMAP如何收取邮件的方法介绍
  2023-03-14 18:58:01
• php如何快速实现数组去重的实例
  2023-03-14 11:30:01
• html中关于<a>标签的全部属性的使用总结
  1970-01-01 08:00:00
• php基础知识总结（新手入门必备）
  2023-03-16 15:20:01
• JavaScript中typeof的使用方法介绍
  1970-01-01 08:00:00
• JavaScript中confirm()方法的使用介绍
  1970-01-01 08:00:00
• HTML5 Placeholder属性的详情介绍
  1970-01-01 08:00:00
• ReactJS中表单的单选多选与反选的实现方法
  1970-01-01 08:00:00

Isu terkini

SQL Count() juga memerlukan 0 Saya hanya mempunyai satu jadual dan saya ingin mengira setiap entri tag yang bermula deng...

daripada 2024-04-06 19:48:53

0

1

449

sql groupby tidak berfungsi, saya mahu kumpulan mengikut code_branch -&gt;pilih('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameasc...

daripada 2024-04-06 19:24:49

0

2

488

Ralat telah ditemui semasa cuba mendapatkan semula versi terkini pakej daripada search.maven.org "Ralat: Tidak dapat mengambil data daripada repositori Maven" semasa mendapatkan...

daripada 2024-04-05 12:11:23

0

1

1471

Ubah suai gaya matSelect apabila memaparkan pilihan Bagaimana untuk menukar sifat pilih tikar apabila pilihan dihidupkan? <mat-selectclass=...

daripada 2024-04-05 09:23:19

0

1

1374

Gema di dalam div dengan gema bersarang Saya cuba menggunakan echo<?phprequire'connect.php';$query=mysqli_query($conn,"SEL...

daripada 2024-04-04 11:09:23

0

1

390

Topik-topik yang berkaitan

Lagi>

• simbol hak cipta html
• html editor dalam talian
• penghasilan laman web html
• ruang html
• apa itu html
• Bagaimana untuk menetapkan saiz fon html
• html kepada txt
• Bagaimana untuk menulis kod kotak teks html

Cadangan popular

• url是什么意思？
• DOM是什么意思
• 如何改变图片大小
• HTML中如何将字体加粗
• html图片大小如何设置

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1407881
• 
  Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu

  4240079
• 
  Tutorial Video Permulaan JAVA

  2437263
• 
  Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

  500296
• 
  Tutorial pengenalan berasaskan sifar PHP

  838681

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1407881 kali belajar
• 
  Tutorial Video Permulaan JAVA

  2437263 kali belajar
• 
  Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

  500296 kali belajar
• 
  Pengenalan pantas kepada pembangunan bahagian hadapan web

  214579 kali belajar
• 
  Kuasai tutorial video PS dari awal

  865576 kali belajar

• 
  [Web front-end] Permulaan pantas Node.js

  5234 kali belajar
• 
  Koleksi lengkap kursus timbunan penuh pembangunan web asing

  4035 kali belajar
• 
  Gunakan GraphQL praktikal bahasa

  3451 kali belajar
• 
  Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah

  575 kali belajar
• 
  Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam

  17699 kali belajar

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan

• [butang borang] kod hubungan borang mesej perusahaan jQuery
• [Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5
• [Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk
• [butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan
• [Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS
• [kesan khas html5] Permainan kotak menolak html5 klasik
• [Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej
• [Kesan album foto] Kesan zum hover kulit album peribadi CSS3

• [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah
• [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar
• [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka
• [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden
• [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan
• [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian
• [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet
• [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu

• [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)

• [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah
• [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar
• [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka
• [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden
• [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan
• [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian
• [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet
• [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu

Tentang kita Penafian Sitemap

Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！