js 操作select和option常用代码整理_基础知识

1、获取选中select的value和text,html代码如下：

复制代码 代码如下:

one
two
three

则可通过以下script代码s来获取选中的value和text

复制代码 代码如下:

$("#mySelect").val(); //获取选中记录的value值
$("#mySelect option:selected").text(); //获取选中记录的text值

2、运用new Option("文本","值")方法添加选项option

复制代码 代码如下:

var obj = document.getElementById("mySelect");obj.add(new Option("4","4"));

3、删除所有选项option

复制代码 代码如下:

var obj = document.getElementById("mySelect");obj.options.length = 0;

4、删除选中选项option

复制代码 代码如下:

var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options.remove(index);

5、修改选中选项option

复制代码 代码如下:

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option("three",3); //更改对应的值
obj.options[index].selected = true; //保持选中状态

6、删除select

复制代码 代码如下:

var obj = document.getElementById("mySelect");
obj.parentNode.removeChild(obj); //移除当前对象

7、select选择的响应事件

复制代码 代码如下:

$("#mySelect").change(function(){ //添加所需要执行的操作代码})

1.动态创建select

复制代码 代码如下:

function createSelect(){
var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

2.添加选项option

复制代码 代码如下:

function addOption(){
//根据id查找对象，
var obj=document.getElementByIdx_x('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}

3.删除所有选项option

复制代码 代码如下:

function removeAll(){
var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;
}

4.删除一个选项option

复制代码 代码如下:

function removeOne(){
var obj=document.getElementByIdx_x('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

5.获得选项option的值

复制代码 代码如下:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;

6.获得选项option的文本

复制代码 代码如下:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;

7.修改选项option

复制代码 代码如下:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

8.删除select

复制代码 代码如下:

function removeSelect(){
var mySelect = document.getElementByIdx_x("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

整个实例的完整代码如下：

复制代码 代码如下:

改进版：在select中添加、修改、删除option元素

复制代码 代码如下:

function watch_ini(){ // 初始
for(var i=0; ivar word = document.createElement_x("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement_x("OPTION");
word.text = f.word.value;
f.keywords.add(word);
}

但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下：

复制代码 代码如下:

function watch_ini(){ // 初始
for(var i=0; ivar oOption=new Option(arguments[i],arguments[i]);
document.getElementByIdx_x("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}

整个实例的完整代码如下：

复制代码 代码如下:

用一个字符串创建一个数组方法:

复制代码 代码如下:

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7457

15

Tutorial CakePHP

1376

52

Apakah format nama akaun stim

77

11

kunci pengaktifan win11 kekal

44

19

Sambungan NYT menunjukkan dan jawapan

17

10

Tunjukkan Lagi

Related knowledge

Kaedah pemprosesan tak segerak bagi pengaturcaraan serentak Select Channels Go menggunakan golang Sep 28, 2023 pm 05:27 PM

Kaedah pemprosesan tak segerak bagi pengaturcaraan serentak SelectChannelsGo menggunakan golang Pengenalan: Pengaturcaraan serentak ialah bidang penting dalam pembangunan perisian moden, yang boleh meningkatkan prestasi dan responsif aplikasi dengan berkesan. Dalam bahasa Go, pengaturcaraan serentak boleh dilaksanakan dengan mudah dan cekap menggunakan penyataan Saluran dan Pilih. Artikel ini akan memperkenalkan cara menggunakan golang untuk kaedah pemprosesan tak segerak bagi pengaturcaraan serentak SelectChannelsGo dan menyediakan khusus

Bagaimana untuk menyembunyikan elemen pilih dalam jquery Aug 15, 2023 pm 01:56 PM

Bagaimana untuk menyembunyikan elemen pilih dalam jquery: 1. kaedah hide(), memperkenalkan perpustakaan jQuery ke dalam halaman HTML, anda boleh menggunakan pemilih yang berbeza untuk menyembunyikan elemen pilih, pemilih ID menggantikan selectId dengan ID elemen pilih yang anda sebenarnya gunakan; 2. kaedah css(), gunakan pemilih ID untuk memilih elemen pilih yang perlu disembunyikan, gunakan kaedah css() untuk menetapkan atribut paparan kepada tiada, dan gantikan selectId dengan ID elemen pilih.

Apakah maksud pilihan dalam dokumentasi linux? Mar 07, 2023 am 10:41 AM

Di Linux, pilihan merujuk kepada pilihan arahan, iaitu suis yang melaraskan tingkah laku pelaksanaan perintah Iaitu, pilihan yang berbeza menentukan hasil paparan arahan. Pilihan dibahagikan kepada pilihan panjang dan pilihan pendek: 1. Pilihan pendek dipandu oleh "-". .

Bagaimana untuk melaksanakan pengikatan peristiwa perubahan bagi elemen terpilih dalam jQuery Feb 23, 2024 pm 01:12 PM

jQuery ialah perpustakaan JavaScript popular yang boleh digunakan untuk memudahkan manipulasi DOM, pengendalian acara, kesan animasi, dll. Dalam pembangunan web, kami sering menghadapi situasi di mana kami perlu menukar pengikatan acara pada elemen terpilih. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengikat acara perubahan elemen terpilih, dan memberikan contoh kod khusus. Pertama, kita perlu mencipta menu lungsur dengan pilihan menggunakan label:

Apakah sebab mengapa Linux menggunakan pilih? May 19, 2023 pm 03:07 PM

Oleh kerana pilih membenarkan pembangun menunggu beberapa penimbal fail pada masa yang sama, ia boleh mengurangkan masa menunggu IO dan meningkatkan kecekapan IO proses. Fungsi select() ialah fungsi pemultipleksan IO yang membolehkan program memantau berbilang deskriptor fail dan menunggu satu atau lebih deskriptor fail yang dipantau menjadi "sedia" yang dipanggil keadaan "bersedia" ialah Merujuk kepada: fail deskriptor tidak lagi disekat dan boleh digunakan untuk jenis operasi IO tertentu, termasuk boleh dibaca, boleh ditulis dan pengecualian. pilih ialah fungsi komputer yang terletak dalam fail pengepala #include. Fungsi ini digunakan untuk memantau perubahan deskriptor fail—membaca, menulis atau pengecualian. 1. Pengenalan kepada fungsi pilih Fungsi pilih ialah fungsi pemultipleksan IO.

Bagaimana untuk menggunakan sintaks pilihan mysql Jun 01, 2023 pm 07:37 PM

1. Kata kunci dalam pernyataan SQL tidak peka huruf besar-kecil SELECT bersamaan dengan SELECT dan FROM bersamaan dengan from. 2. Untuk memilih semua lajur daripada jadual pengguna, anda boleh menggunakan simbol * untuk menggantikan nama lajur. Sintaks--ini ialah ulasan--pertanyaan keluar [semua] data daripada [jadual] yang ditentukan oleh FEOM * bermaksud [semua lajur] SELECT*FROM--pertanyaan keluar data yang ditentukan daripada [jadual] yang ditentukan daripada Data daripada. nama lajur (medan) PILIH nama lajur DARI contoh nama jadual--Nota: Gunakan koma Inggeris untuk memisahkan berbilang lajur pilih nama pengguna, kata laluan daripada

Laksanakan Select Channels Go pengoptimuman prestasi pengaturcaraan serentak melalui golang Sep 27, 2023 pm 01:09 PM

Melaksanakan SelectChannels melalui golang Pengoptimuman prestasi pengaturcaraan serentak Go Dalam bahasa Go, adalah perkara biasa untuk menggunakan goroutine dan saluran untuk melaksanakan pengaturcaraan serentak. Apabila berurusan dengan berbilang saluran, kami biasanya menggunakan penyata pilihan untuk pemultipleksan. Walau bagaimanapun, dalam kes konkurensi berskala besar, menggunakan pernyataan terpilih boleh menyebabkan kemerosotan prestasi. Dalam artikel ini, kami akan memperkenalkan beberapa pelaksanaan pilih melalui golang

Pilih Channels Go pengaturcaraan serentak untuk kebolehpercayaan dan keteguhan menggunakan golang Sep 28, 2023 pm 05:37 PM

SelectChannels for Reliability and Robustness using Golang Pengenalan kepada Concurrent Programming: Dalam pembangunan perisian moden, concurrency telah menjadi topik yang sangat penting. Menggunakan pengaturcaraan serentak boleh menjadikan atur cara lebih responsif, menggunakan sumber pengkomputeran dengan lebih cekap dan lebih berupaya mengendalikan tugas pengkomputeran selari berskala besar. Golang ialah bahasa pengaturcaraan serentak yang sangat berkuasa Ia menyediakan cara yang mudah dan berkesan untuk melaksanakan pengaturcaraan serentak melalui coroutine dan mekanisme saluran.

See all articles