多级<select>选择的实现(利用selectedIndex属性)

本文介绍了一个使用HTML和JavaScript实现的动态分类选项功能。当用户在页面上选择不同的板块时,对应的分类选项会根据预设规则动态显示。通过这种方式提高了用户体验,并确保只有相关分类可见。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

希望实现的功能:当用户做板块选择时,分类选项栏会显示相应的可选选项

下面是html部分:

<form >
 板块: <select id="hyh" onclick="getselect()" >
            <option>--请先选择此项--</option>
            <option>主页</option>
            <option>EDP</option>
            <option>EMBA</option>
            <option>MBA</option>
        </select>
  分类: <select  name="type" >
            <option >--请先选择板块--</option>
            <volist name="types" id="type">
            <option style="display: none" name="hyh1" value="{$key}" >{$type}</option>
            </volist>
        </select>
      <input type="submit" value='筛选' class="btn btn-default"
          onclick='hyherror();filter_news(); return false;' />
      <input type="submit" value='创建' class="btn btn-default"
          onclick='create_news(); return false;' />
    </form>

下面是js部分:

<script type="text/javascript">
function getselect()
  {
  var x=document.getElementById("hyh").selectedIndex;
   var y=document.getElementsByName("hyh1");
  switch(x)
{
case 0:
  var a = new Array();  
    break;    
case 1:
 var a = new Array(0,1,2,3,4,5); 
  break;
case 2:
 var a = new Array(16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,36,37);  
  break;
case 3:
 var a = new Array(6,7,8,9,10);  
  break;
case 4:
 var a = new Array(11,12,13,14,15);  
  break;
  default:
    var a = new Array();    
}
for (var i=0;i<38;i++){
    if(a.indexOf(i)>=0){
    y[i].style.display="inline";
     y[i].selected="selected";
     }else{ y[i].style.display="none";}
  } 
  }
  function hyherror()
  {
      var x2=document.getElementById("hyh").selectedIndex;
      if(x2===0){
      var y2=document.getElementsByName("hyh1");
      y2[0].style.display="inline";
     y2[0].selected="selected";
      }
  }
</script>  

算法思路:

  1. 分类选项栏会罗列出全部的选项,不过在一开始时,所有选项均为“display:none”不予显示。
  2. 在用户每次点击板块选项栏时触发js,x选择器得到板块选项栏的索引值,y选择器得到所有的选项元素。
  3. 根据x得到的不同索引值,创建不同的数组,数组中包含的是要显示的选项的排序号
  4. js将从1-40(选项个数最大值)进行遍历,判断是否存在于数组中,如果存在即显示该条选项,否则不显示。并且会将最后一个选项作为默认选项。
  5. hyherror()函数主要为了处理当用户什么都不选时,默认选项为空,导致后续的操作错误。该事件绑定于两个按钮上,点击按钮时会先判断用户是否没有选择正确的选项,如果没有,则会给选项卡赋默认值。如果否,则正常操作按钮。

keys:

  1. getElementsByName获取多个dom
  2. selectedIndex属性,<select>的这个属性可以避免我们需要更复杂的代码进行传值,它告诉了我们第一个select选择了什么
  3. selected="selected"定义select标签默认值

转载于:https://my.oschina.net/HeYuhui/blog/632433

<!DOCTYPE html> <html> <head> <title>多级分类选择系统</title> <HTA:APPLICATION ID="MultiLevelSelector" APPLICATIONNAME="分类选择器" BORDER="thin" CAPTION="yes" ICON="shell32.dll" SCROLL="no" SINGLEINSTANCE="yes" WINDOWSTATE="normal" /> <style> body {font-family: Microsoft YaHei; padding: 20px} .level {margin: 10px 0; padding: 8px; width: 300px} .input-container {margin-top: 20px; border-top: 1px solid #ccc; padding-top: 15px} .dynamic-input {margin: 5px 0; padding: 6px; width: 300px} </style> <script language="VBScript"> ' 分类数据定义 Dim categoryData(3) categoryData(0) = Array("电子产品", "服装", "食品") categoryData(1) = Array( _ Array("手机", "电脑", "相机"), _ Array("男装", "女装", "童装"), _ Array("生鲜", "零食", "饮料") _ ) categoryData(2) = Array( _ Array(Array("苹果", "三星", "华为"), Array("笔记本", "台式机"), Array("单反", "微单")), _ Array(Array("衬衫", "外套"), Array("裙子", "上衣"), Array("T恤", "裤子")), _ Array(Array("水果", "蔬菜"), Array("饼干", "巧克力"), Array("果汁", "碳酸饮料")) _ ) ' 输入框配置 Dim inputConfig Set inputConfig = CreateObject("Scripting.Dictionary") inputConfig.Add "苹果", Array("型号:", "颜色:", "存储容量:") inputConfig.Add "三星", Array("型号:", "颜色:", "5G支持:") inputConfig.Add "笔记本", Array("品牌:", "CPU型号:", "内存大小:") inputConfig.Add "水果", Array("品种:", "产地:", "重量(kg):") ' 窗口加载时初始化 Sub Window_OnLoad ' 填充一分类 For i = 0 To UBound(categoryData(0)) SetOption level1, categoryData(0)(i) Next ' 设置窗口位置和大小 window.resizeTo 600, 500 CenterWindow End Sub ' 一分类改变事件 Sub Level1_OnChange ' 清除下选项 ClearOptions level2 ClearOptions level3 ClearDynamicInputs Dim idx : idx = level1.selectedIndex If idx >= 0 Then ' 填充二分类 For i = 0 To UBound(categoryData(1)(idx)) SetOption level2, categoryData(1)(idx)(i) Next End If End Sub ' 二分类改变事件 Sub Level2_OnChange ' 清除下选项 ClearOptions level3 ClearDynamicInputs Dim idx1 : idx1 = level1.selectedIndex Dim idx2 : idx2 = level2.selectedIndex If idx1 >= 0 And idx2 >= 0 Then ' 填充三分类 For i = 0 To UBound(categoryData(2)(idx1)(idx2)) SetOption level3, categoryData(2)(idx1)(idx2)(i) Next End If End Sub ' 三分类改变事件 Sub Level3_OnChange ClearDynamicInputs Dim selectedValue : selectedValue = level3.options(level3.selectedIndex).value If inputConfig.Exists(selectedValue) Then CreateDynamicInputs inputConfig(selectedValue) End If End Sub ' 创建动态输入框 Sub CreateDynamicInputs(fields) Dim container, label, input Set container = document.getElementById("input-container") For Each field In fields ' 创建标签 Set label = document.createElement("label") label.innerText = field label.style.display = "block" label.style.marginTop = "10px" container.appendChild(label) ' 创建输入框 Set input = document.createElement("input") input.className = "dynamic-input" input.type = "text" container.appendChild(input) Next End Sub ' 清除动态输入框 Sub ClearDynamicInputs Dim container Set container = document.getElementById("input-container") container.innerHTML = "" End Sub ' 添加下拉选项 Sub SetOption(selectElem, value) Dim option Set option = document.createElement("option") option.text = value option.value = value selectElem.add(option) End Sub ' 清除下拉选项 Sub ClearOptions(selectElem) While selectElem.options.length > 0 selectElem.remove(0) Wend End Sub ' 窗口居中 Sub CenterWindow Dim screenWidth, screenHeight screenWidth = window.screen.availWidth screenHeight = window.screen.availHeight window.moveTo (screenWidth - document.body.clientWidth) / 2, _ (screenHeight - document.body.clientHeight) / 2 End Sub </script> </head> <body> <h2>多级分类选择器</h2> <label>一分类:</label> <select id="level1" class="level" onchange="Level1_OnChange"></select><br> <label>二分类:</label> <select id="level2" class="level" onchange="Level2_OnChange"></select><br> <label>三分类:</label> <select id="level3" class="level" onchange="Level3_OnChange"></select><br> <div id="input-container" class="input-container"> <!-- 动态生成的输入框将出现在这里 --> </div> </body> </html> 这段代码中的Dim option报错 缺少标识符
最新发布
08-20
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值