获取输入框的编码,对应下拉区域数据显示

1、根据关键字输入框的值(只对编码,即正整数做处理),动态变化区域的值(区域默认为越秀区)

在这里插入图片描述

2、编码对应的区域

在这里插入图片描述
在这里插入图片描述

3、思路:把全部空格去掉 - 必须为正整数 - 长度必须大于等于5 - 截取第四个和第五个的字符串 - 对应上则赋值给下拉区域 - 否则都为默认值
html:
<a-col :xxl="5" :xl="6" :lg="12">
  <a-form-item label="关键字:">
    <a-input
      onkeyup="this.value=this.value.replace(/[, ]/g,'')"
      v-decorator="['devId']"
      placeholder="请输入XX编码、XX名称"
      @change="getRegion"
    />
  </a-form-item>
</a-col>

js:
// 获取输入框的值,用于获取对应的区域
getRegion(obj) {
  // 获取输入框字符串
  let str = obj.target.value;
  //  判断字符串长度
  if(str.length >= 5) {
    // 判断是否为正整数
    if(!(/(^[0-9]\d*$)/.test(str))) {
      this.form.setFieldsValue({ region: this.regionList[0].dictLabel })
    } else {
      // 判断截取的字符串
      switch(str.substring(3,5)) {
        case "01": return this.form.setFieldsValue({ region: "荔湾区"})
        case "02": return this.form.setFieldsValue({ region: "越秀区"})
        case "03": return this.form.setFieldsValue({ region: "海珠区"})
        case "04": return this.form.setFieldsValue({ region: "天河区"})
        case "05": return this.form.setFieldsValue({ region: "白云区"})
        case "06": return this.form.setFieldsValue({ region: "黄埔区"})
        case "07": return this.form.setFieldsValue({ region: "番禺区"})
        case "08": return this.form.setFieldsValue({ region: "花都区"})
        case "09": return this.form.setFieldsValue({ region: "南沙区"})
        case "10": return this.form.setFieldsValue({ region: "从化区"})
        case "11": return this.form.setFieldsValue({ region: "增城区"})
      }
    }
  } else {
    this.form.setFieldsValue({ region: this.regionList[0].dictLabel })
  }
},
4、input输入框自动消除空格 原文地址(是位小姐姐程序大佬哦):https://wangxiaoting.blog.csdn.net/article/details/89985117?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
onkeyup="this.value=this.value.replace(/[, ]/g,'')"

我们都是超级无敌无敌的小可爱!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值