web前端下拉框技术（js）

朴灿烈づ我的快乐病毒、 2024-02-17 19:10 7阅读 0赞

补充：form对象 代表<form   
 form.submit()方法 提交表单的处理  
：select对象<select标签\---- option对象<option标签  
 select.options属性 option数组\-- 所有的<option标签option的value属  
性 .value,内部文本.text  
 select.selectedIndex属性 获得当前被选中的option标签，在options数组中  
的下标  
下拉列表的分析思路

![Image 1][]

<html>  
<head>  
<script type="text/javascript">  
var date = \{  
北京:\['东城','西城','海淀'\],  
上海:\['徐家汇','浦东','浦西'\],  
天津:\['河东','河西','南开'\],  
\}  
function cascadeMenu()\{  
var city = document.getElementById("city"); //select  
//alert(city.options\[city.selectedIndex\].text);  
//alert(date\[city.options\[city.selectedIndex\].text\]);  
var section = document.getElementById("section");  
  
section.innerHTML="";  
  
var sections = date\[city.options\[city.selectedIndex\].text\];  
for(var i=0;i<sections.length;i++)\{  
var txt = document.createTextNode(sections\[i\]);  
var op = document.createElement("option");  
op.appendChild(txt);  
section.appendChild(op);  
\}  
\}  
  
</script>  
</head>  
<body οnlοad="cascadeMenu()">  
  
city<select id="city" οnchange="cascadeMenu();">  
<option value="1">北京</option>  
<option value="2">上海</option>  
<option value="3">天津</option>  
</select>  
section<select id="section">  
  
</select>  
</body>  
</html>

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 web前端下拉框技术（js）

补充：form对象代表<form form.submit()方法提交表单的处理：select对象<select标签\---- option对象<opt

朴灿烈づ我的快乐病毒、/ 2024年02月17日 19:10/ 0 赞/ 8 阅读

相关 js下拉框时间拼接

<html> <head> <meta charset="UTF-8"> <title></title> <script

忘是亡心i/ 2023年10月17日 18:36/ 0 赞/ 16 阅读

相关 JavaScript实例--网页跳转下拉框-JS修改表格内容-JS下拉框加元素

一、JavaScript实例 1、需求：做一个下拉框，分别是河大，百度，京东—点按钮就直接跳转 <body> <select name="" id=

爱被打了一巴掌/ 2023年10月06日 18:31/ 0 赞/ 9 阅读

相关 JS 实现下拉框去重

JS 实现下拉框去重学习内容：需求总结：学习内容：需求用 JS 下拉框去重实现代码 <html>

悠悠/ 2022年10月16日 11:23/ 0 赞/ 181 阅读

相关 JS 实现下拉框回显

JS 实现下拉框回显学习内容：需求总结：学习内容：需求用 JS 实现下拉框回显实现代码 <!DOCTYPE

梦里梦外;/ 2022年10月16日 10:29/ 0 赞/ 262 阅读

相关 js下拉框之左右移动

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

分手后的思念是犯贱/ 2022年03月19日 07:54/ 0 赞/ 246 阅读

相关下拉框联动jquery\js例子

下拉框联动jquery\\js例子具体代码如下： $(window).load(function () { // 父级下拉框修改时，根据

小咪咪/ 2021年12月11日 08:45/ 0 赞/ 342 阅读

相关下拉框

1.jsp: <select class=" z9" name="sstage" id="sstage"> <c:forEach items="$\{sstagelis

比眉伴天荒/ 2021年11月23日 03:28/ 0 赞/ 462 阅读

相关 Web前端-Ajax基础技术(下)

![Web前端-Ajax基础技术(下)][Web_-Ajax] > Web前端-Ajax基础技术(下) 你要明白`ajax`是什么，怎么使用？ `ajax`，`web`程

小咪咪/ 2021年09月18日 12:44/ 0 赞/ 294 阅读

相关重构-下拉框

动画: 选择按钮旋转下拉框伸缩边框、图标、选项hover变色参数: placeholder:PropTy

痛定思痛。/ 2021年07月24日 20:58/ 0 赞/ 460 阅读