cari

Rumah  >  Artikel  >  hujung hadapan web  >  Kod js yang paling mudah untuk melaksanakan kemahiran menu lungsur turun bawah pautan sekunder pilih_javascript

Kod js yang paling mudah untuk melaksanakan kemahiran menu lungsur turun bawah pautan sekunder pilih_javascript

WBOY
WBOYasal
2016-05-16 15:05:092130semak imbas

Contoh dalam artikel ini berkongsi dengan anda pelaksanaan js menu lungsur turun pautan kedua untuk rujukan anda. Kandungan khusus adalah seperti berikut

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script language="JavaScript" type="text/javascript">
   //定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
   var city=[
   ["北京","天津","上海","重庆"],
   ["南京","苏州","南通","常州"],
   ["福州","福安","龙岩","南平"],
   ["广州","潮阳","潮州","澄海"],
   ["兰州","白银","定西","敦煌"]
   ];

   function getCity(){
     //获得省份下拉框的对象
     var sltProvince=document.form1.province;
     //获得城市下拉框的对象
     var sltCity=document.form1.city;     
     //得到对应省份的城市数组
     var provinceCity=city[sltProvince.selectedIndex - 1];
 
     //清空城市下拉框，仅留提示选项
     sltCity.length=1;
 
     //将城市数组中的值填充到城市下拉框中
     for(var i=0;i<provinceCity.length;i++){
       sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
     }
   }
 </script>
 </HEAD>
 
 <BODY>
 <FORM METHOD=POST ACTION="" name="form1">
     <SELECT NAME="province" onChange="getCity()">
       <OPTION VALUE="0">请选择所在省份 </OPTION>
       <OPTION VALUE="直辖市">直辖市 </OPTION>
       <OPTION VALUE="江苏省">江苏省 </OPTION>
       <OPTION VALUE="福建省">福建省 </OPTION>
       <OPTION VALUE="广东省">广东省 </OPTION>
       <OPTION VALUE="甘肃省">甘肃省 </OPTION>
     </SELECT>
     <SELECT NAME="city">
       <OPTION VALUE="0">请选择所在城市 </OPTION>
     </SELECT>
   </FORM>
 </BODY>
</HTML>

Kod ini agak mudah.

Jika anda tidak biasa dengan js, anda boleh melihat kandungan berikut tentang js memproses objek terpilih:

1 Gunakan atribut selectedIndex untuk mendapatkan indeks pilihan semasa
Pilihan kotak lungsur ialah tatasusunan linear, setiap pilihan mempunyai indeks dan SelectIndex mewakili nombor indeks pilihan yang dipilih pada masa ini. Digabungkan dengan atribut pilihan, objek pilihan yang dipilih boleh diperolehi untuk pemprosesan selanjutnya. Apabila kotak drop-down membenarkan berbilang pilihan, sifat SelectedIndex mengembalikan indeks pertama yang dipilih.
selectedIndex ialah harta baca sahaja Jika anda ingin menetapkan item dalam kotak lungsur yang ditentukan oleh indeks kepada keadaan yang dipilih, anda boleh menetapkan selected=true objek pilihan untuk mencapai ini.

2. Tambahkan pilihan pada objek pilihan
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
new Option(provinceCity[i],provinceCity[i]) bermaksud mencipta objek pilihan dengan nilai provinceCity[i] dan teks provinceCity[i]. sltCity ialah objek bandar pada halaman daripada pilihan baharu.

3. Kosongkan objek pilihan
Terdapat dua cara untuk memadam semua pilihan dalam kotak lungsur,
Kaedah pertama ialah melintasi dan memadam: 

 var l=myselect.length;
 for(var i=0;i<l;i++){
 myselect.options[i]=null;
 }

Kaedah kedua agak mudah, jadi kaedah ini biasanya digunakan:
myselect.length=0;

Kenyataan：
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 sebelumnya：effect_jquery imej jQuery hebatArtikel seterusnya：effect_jquery imej jQuery hebat

Artikel berkaitan

Lihat lagi