根据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请求传参的问题（详细教程）

Atas ialah kandungan terperinci 根据select标签设置默认选中的选项方法该怎么做？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

select 设置 默认

sumber：php.cn

Artikel sebelumnya：怎样利用Vue动态生成form表单 Artikel seterusnya：怎样使用JS中console['']输入方法

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

• 在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

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 ->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>

• Laman web rasmi OKEX
• Bagaimana untuk menetapkan komputer untuk menyambung ke WiFi secara automatik
• Format e-mel perniagaan
• Peranan fungsi float() dalam python
• Bagaimana untuk memotong gambar panjang pada telefon bimbit Huawei
• Cara menyusun dalam excel
• vps
• Mengapa tiada tindak balas apabila fon kepala dipasang pada komputer?

Cadangan popular

• apa maksud js
• js怎么将字符串转为数组？
• javascript如何刷新页面
• js数组怎么删除某一项
• sqrt函数怎么使用

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)

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

  4258575
• 
  Tutorial Video Permulaan JAVA

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

  504141
• 
  Tutorial pengenalan berasaskan sifar PHP

  844461

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

  1417427 kali belajar
• 
  Tutorial Video Permulaan JAVA

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

  504141 kali belajar
• 
  Pengenalan pantas kepada pembangunan bahagian hadapan web

  215339 kali belajar
• 
  Kuasai tutorial video PS dari awal

  878334 kali belajar

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

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

  5095 kali belajar
• 
  Gunakan GraphQL praktikal bahasa

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

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

  21773 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

• [bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG)
• [bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)
• [gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)
• [bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG)
• [bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)
• [bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza
• [gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)
• [bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (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！