如何添加html下拉框

很多小伙伴不知道html如何添加下拉框，今天给小伙伴们介绍一下：

一、html+react基础版

代码如下：

// 初始化数据
constructor(options) {
    super(options);
    this.state = {
        Province: 1
    }
}

// 获取表单的值 并传给state
handlerChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value  //省份value值
    })
        console.log(e.target.options[e.target.selectedIndex].text)  //省份中文
}


<select
    name="Province"
    id="Province"
    onChange={this.handlerChange}
    value={this.state.Provinde}
>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">河北</option>
    <option value="4">山东</option>
    <option value="5">山西</option>
</select>

<div>省份:{this.state.Province}</div>

二、ant框架版

代码如下：

import { Cascader } from 'antd'//组件：ant
import typeIp from '../assets/json/typeIp.json' //数据：设备类型和默认IP对应关系

let dataTree = [] //设备类型与默认IP对应关系树

constructor(props) {
  super(props)
  this.state = {
    message: { 
      equipmentType: ''
    }
  }
}


componentDidMount() {
  dataTree = typeIp
}

 <Cascader className="input" options={dataTree} onChange={this.handleTypes} placeholder="请选择设备类型" />}

 // 获取设备类型选项  根据设备类型 获取设备类型和默认ip
  handleTypes = (value, data) => {
    this.setState(preState => {
      return Object.assign({}, preState, {
        message: Object.assign({}, preState.message, {
          equipmentType: data[0] && data[0].label || '',
        })
      })
    })
  }

以上是关于“如何添加html下拉框”的介绍，如需购买云服务器，推荐使用酷番云，独享IP、独享云服务器齐备，弹性灵活各种配置任您选购，最低只需要43/月，免费帮助配置环境，挂载磁盘等，协助处理简单问题，同时提供快速0元备案，让您快速运营，详情请咨询酷番云。

产品选购地址：

https://www.kufanyun.com/server/buy.html