js操作select标签级联

最新推荐文章于 2019-08-02 14:54:30 发布

虽然我也不太懂

最新推荐文章于 2019-08-02 14:54:30 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：自我总结-2013

本文链接：https://blog.youkuaiyun.com/Byemyloveing/article/details/8821720

自我总结-2013 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的级联下拉框功能，通过监听主要选择框的变化来动态更新次级选择框的内容。该方法适用于需要根据用户在第一个选择框中的选择来过滤第二个选择框选项的场景。

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

<html>

<head>

<title></title>

</head>

<body>
    <table>
            <TR>
            <TD>
             
       <select style="width: 100px" name="majorNotifyType" id="majorNotifyType" onchange="mutableOnSelect('majorNotifyType', 'notifyType')">
        <option value="01" onclick="test()">TYPE1</option>
        <option value="02" >TYPE2</option>
       </select>
        </TD>
      <TD height="25">
        
       <select style="width: 100px" name="notifyType" id="notifyType">
        <option value='01'>01 NOTIFY1</option>
        <option value='02'>02 NOTIFY2</option>
       </select>
      </TD>
      <TD id="tdTitle">branch</TD>
     
     </TR>
    </table>
<script>
/**
 js操作select级联，代码不是很精简，有点多，O(∩_∩)O~
*/
function mutableOnSelect(majorId, value) {
    var selectedVal = cascadeMenu.getSelectOptionsVal(majorId);
    cascadeMenu.onChange(value, selectedVal);
}

var cascadeMenu = (function(){
    //获取指定的node
    function $(idName){
     var node = false;
      idName && (typeof idName == 'string') &&
      (node = document.getElementById(idName));   
      return node;
    }
    
    //replace指定的select标签的option选项
    function replace(id, options){
     var courier = $(id);
     courier.length = 0;
     while(options[0] && courier.appendChild(options[0]));
     return true;
    }
    
    //判断条件，执行
    function onchange( changedMenuIdName, contentType) {
     var __contentHTML = getChangeContentHTML(contentType);
     var __options = resolveOptions(__contentHTML);
     replace(changedMenuIdName, __options);
    }
    
    //获取改变后的contentHTML
    function getChangeContentHTML(value) {
     var __contentHTML_type_1 = "<option value='01'>01 breeze</option><option value='02'>02 fiz</option>";
     var __contentHTML_type_2 = "<option value='01'>01 courage</option><option value='02'>02 nerve</option><option value='03'>03 勇气</option>";
     if(value == '01') return __contentHTML_type_1;
     if(value == '02') return __contentHTML_type_2;
    }
    
    //解析成option
    function resolveOptions(contentHTML) {
        var options = [];
        var temp = document.createElement('a');
        temp.innerHTML =  '<select>' + contentHTML + '</select>';
        options = temp.getElementsByTagName('option');
        return options;
        
    }
    
    //获取选中的option的value
    function getSelectOptionsVal(id) {
        var selectedIndex = $(id).selectedIndex;
        alert(selectedIndex)
        var selectedVal = $(id).options[selectedIndex].value;
                    return selectedVal;
    }
    
    return 
                {
                    onChange: ChangeSelectedItem,
                    getSelectOptionsVal: getSelectOptionsVal
                };
  }());
</script>
</body>

</html>