前端小实现包含多个＜option＞标签的下拉列表

白天的我最菜

于 2023-08-02 21:23:23 发布

阅读量165

点赞数

分类专栏：收集收集实战文章标签：前端

本文链接：https://blog.csdn.net/m0_72735063/article/details/132070653

版权

收集收集实战专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html>

<head>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        省份：
        <select>
            <option selected="selected">
                请选择
            </option>
            <option value="广东">
                广东
            </option>
            <option value="湖南">
                湖南
            </option>
            <option value="湖北">
                湖北
            </option>
            <option value="北京">
                北京
            </option>
        </select>
        城市：
        <select>
            <option selected="selected">
                请选择
            </option>
            <option value="长沙">
                长沙
            </option>
            <option value="株洲">
                株洲
            </option>
            <option value="湘潭">
                湘潭
            </option>
        </select>
    </div>
    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            city: '请选择',
            province: '请选择',
            provinces: ['广东', '湖南', '湖北', '北京'],
            cityList: [],
            area: [{
              name: '广东',
              id: 1,
              child: ['广州', '深圳', '东莞']
            },
            {
              name: '湖南',
              id: 2,
              child: ['长沙', '株洲', '湘潭']
            },
            {
              name: '湖北',
              id: 3,
              child: ['武汉']
            },
            {
              name: '北京',
              id: 4,
              child: ['北京']
            }]
          },
          watch: {
            province: function(nval, oval) {
              var self = this;
              var cityList = [];
              if (nval == '请选择') {
                this.citylist = [];
              }
              if (nval != oval) {
                for (var i = 0; i < self.area.length; i++) {
                  if (self.area[i].name == nval) {
                    cityList = self.area[i].child;
                  }
                }
                this.city = "请选择";
                this.cityList = cityList;
              }
            }
          }
        })
    </script>
</body>

</html>

该代码是使用Vue.js的v-bind和v-for指令来动态生成一个包含多个<option>标签的下拉列表。其中，v-bind:value="c"是将当前循环的值c绑定到每个<option>标签的value属性上，

v-for="c in cityList"是使用cityList数组的每个元素c进行循环遍历。

在每个<option>标签中，使用双大括号语法{{c}}来显示每个城市的名称。

最终，根据cityList数组的长度，会生成相应数量的<option>标签，每个标签的值和显示文本都是对应的城市名称。

白天的我最菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小实现包含多个＜option＞标签的下拉列表

指令来动态生成一个包含多个<option>标签的下拉列表。其中，v-bind:value="c"是将当前循环的值c绑定到每个<option>标签的value属性上，最终，根据cityList数组的长度，会生成相应数量的<option>标签，每个标签的值和显示文本都是对应的城市名称。v-for="c in cityList"是使用cityList数组的每个元素c进行循环遍历。在每个<option>标签中，使用双大括号语法{{c}}来显示每个城市的名称。该代码是使用Vue.js的。v-bind和v-for。
复制链接

扫一扫