JavaScript实现联动选择

最新推荐文章于 2023-06-13 11:16:28 发布

CloudCraft

最新推荐文章于 2023-06-13 11:16:28 发布

阅读量2.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/CloudCraft/article/details/11992117

版权

最近在项目中负责做了一个规则配置的模块，不同的参数配置不同的规则，不同的一级参数配置不同的二级参数，规则之间的逻辑关系存取等。于是搜集了一些js实现联动选择的方法，在这里与大家分享。

1. 静态联动选择

这里说的静态联动选择是指我们的第一级选择参数对应哪些二级参数是静态的，最常见的实例就是日期和省市的选择：

对于类似这样的需求，我们可以事先将不同参数之间对应的二级参数定义好，如日期选择中的month和day的选择，只需简单的判断年份是否闰年、月份等即可确定day的选择。

简单实现代码：

<html>
<body>
<select id="idYear">
<select id="idMonth" οnchange="selectMonth(this,"idDay")">
<select id="idDay">
</body>
<script type="text/javascript">
  var year_a = [2013,2014,2015];
  var month_a = [1,2,3,4,5,6,7,8,9,10,11,12];
  var day_a = {"big": [1,2,3,...,31],"small": [1,2,3,...,30],"leap": [1,2,3,...,29],"normal": [1,2,3,...,28]};
  // init year and month..... 
  function selectMonth(obj, year_id, day_id){
    var month = obj.value;
    var year = getElementById(year_id).value;
    day = getElementById(day_id);
    switch(month) {
      case 4:
      case 6:
      case 9:
      case 11:
        var days = day_a["small"];
        break;
      case 2:
        if(isLeap(year)) var days = day_a["leap"];
        else var days = day_a["normal"];
        break;
      default:
        var days = day_a["big"];
    }
    day.options.length = days.length;
    for(var i=0; i<days.length; i++）{
      day.options[i].text = days[i];
      day.options[i].value = days[i];
    }
  }
</script>
</html>

2. 动态联动选择

对应静态联动，动态联动选择只是一个相对的说法，指我们的多级参数随着时间在不断变化，甚至不同的参数对应的下一级参数也会变化。

这时候呢，最直接的方法就是在选择的参数发生变化时向后台发送ajax请求得到对应的参数列表，其他实现方法与静态联动选择相同。

3. 扩展

但是在针对具体需求进行开发时，其实并不仅仅限于<select> <option>组件的条件选择，还会涉及添加条件、删除条件等等。

这时候发现jquery真的是好好用啊，构造各种Html元素只需要：

var div = $("<div>", {"class": "sub_rule_conditions"});
var span = $("<span>", {"text": "This is the text."});
var button = $("<button>", {"onclick": "add_condition()", "class": "btn btn-link", "text": "Add Condition"});

如何将构造好的这些元素添加到具体的位置呢，如将span和button添加到div下：

div.append(span)
div.append(button)

同样可以将div通过这种方式添加到已有的html元素下，实现精确定位。

CloudCraft

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现联动选择

最近在项目中负责做了一个规则配置的模块，不同的参数配置不同的规则，不同的一级参数配置不同的二级参数，规则之间的逻辑关系存取等。于是搜集了一些js实现联动选择的方法，在这里与大家分享。1. 静态联动选择这里说的静态联动选择是指我们的第一级选择参数对应哪些二级参数是静态的，最常见的实例就是日期和省市的选择：对于类似这样的需求，我们可以事先将不同参数之间对应的二级参数定义好，如日期选
复制链接

扫一扫