用JS简单实现级联下拉框（添加选项、删除、清空）_js清空下拉菜单_码农米格的博客

实现思路：

以下内容，我们省份用 prov 表示，城市用 city 表示。
（1）在JS中我们可以使用 document.getElement(id) 来获取指定id的标签元素。
（2）对于 <select></ select> 标签，获取到这个下拉框中的定位符。
（3）有了这个定位符，利用 value 属性就可以获取到下拉框选项中的 option 。
（4）有了 option 选项就可以用来做判断---->有了判断就可以对正确的结果进行操作：如添加对应的 option 选项。
<script>
	function getCity(prov,citys){
		 * 获取选择的省份
		 * [prov.selectedIndex]为被选中选项的下标
		 * .text则是获取对应的值
		var provs = prov.options[prov.selectedIndex].text; 
		// 获取城市下拉框
		var city = document.getElementById(citys);
		// 清空城市下拉框
		city.length=0;
		// 判断所选省份
		switch (provs){
			// 找到对应的省份后就可以进行添加选项的操作
			case '福建省':
				// 给对应的省份添加城市
				var op1 = new Option("福州市","福州市");
				var op2 = new Option("厦门市","厦门市");
				var op3 = new Option("莆田市","莆田市");
				city.add(op1);
				city.add(op2);
				city.add(op3);
				break;
			case '山西省':
			default:
				break;
</ script>
效果展示：
 
功能增加：添加，删除与清空
 
在前面内容中，我们可以看出select与option的关系就像是数组名与数组元素值。所以通过document.getElement(id)获取到的实际是一个select数组。 
实现思路：
 
（1）要实现添加就要获取到select数组 ，这里用provs表示。
 （2）获取数组后，通过var opt = new Option("显示内容","value值")创建option选项。
 （3）通过add(opt)方法，添加到数组中。 
实现代码：
 
/************************************ 添加省份 ************************************/
 * prov  == 传进来的标签的id值
 * flag：为了第二个检验函数的输出
function addProv(prov){
	// 获取省份的select数组
	var provArr = document.getElementById(prov);
//				alert(provArr[0].value);
	// 获取要添加的省份的值
	var newProv = document.getElementById("newCity").value;
	// 判断新省份是否已存在
	var flag = true; // 不存在为true，存在为false
	for(var i=0;i<provArr.length;i++){
		if(newProv == provArr[i].value || newProv == ''){
			flag = false;
			break;
	// 显示添加成功
	checkAdd(provArr,newProv,flag);
/************************************ 检验添加 ************************************/		
 * provArr == 获取到的select数组
 * newProv == 新省份
 * flag == 判断标记
function checkAdd(provArr,newProv,flag){
		var msgTip = document.getElementById("tip");
		if(flag){
				// 创建新的省份选项
			var opt = new Option(newProv,newProv);
			provArr.add(opt);
			// 清除文本框中的内容
			var cityText = document.getElementById("newCity");
			cityText.value = '';
			msgTip.innerHTML = "添加成功";
			msgTip.style.color = "green";
		}else{
			msgTip.innerHTML = "输入为空或省份已存在";
			msgTip.style.color = "red";
实现思路：
 
基本上同添加函数的思路一样获取要操作的数组，利用remove("要删除的下标")方法删除指定选项。 
实现代码：
 
function delProv(prov){
	var msgTip = document.getElementById("tip");
		// 获取目标省份
		var tarprov = document.getElementById("newCity").value;
		// 获取省份的select数组
		var provArr = document.getElementById(prov);
		// 获取文本框
		var cityText = document.getElementById("newCity");
		var flag = false; // 不存在为false，存在为true
		for(var i=0;i<provArr.length;i++){
			if(tarprov == provArr[i].value){
				// 找到并删除
				provArr.remove(i);
				flag = true;
				break;
		if(flag == true){
			cityText.value = '';  // 清空文本框
			msgTip.innerHTML= "删除成功";
			msgTip.className="succeed";
		}else{
			cityText.value = '';
			msgTip.innerHTML = "输入为空或所选省份不存在";
			msgTip.className = "error";
实现思路：
 
直接将获取到的数组长度（length）置位0，即provArr.options.length = 0、 
实现代码:
 
function clearProv(prov){
   	// 获取省份的select数组
   		var provArr = document.getElementById(prov);
   		provArr.options.length = 0;
实验效果展示：
 
                    JavaScript简单实现的级联下拉框小功能记录这里用"省份与城市"作为级联对象，在HTML头部来引用JS代码来实现。实现思路：以下内容，我们省份用prov表示，城市用city表示。（1）在JS中我们可以使用document.getElement(id)来获取指定id的标签元素。（2）对于&lt;select&gt;&lt;/ select&gt;标签，获取到的则这个下拉框中的定位符。...
				Javascript如何删除列表项中的下拉项呢？要从列表框同时删除多个项目，我们不能从上到下的删除，因为上面的项目每删除一个，下面的项目的索引号就会变化，所以只能从下向上删除，这样才不会出现索引号乱变的问题了。
　　如下面的例子：
　　HTML代码：
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 制作级联下拉菜单（三级） -->
				第一种：普通方法
比如说var message为后台传递到前端的一个数组（一般来说，后台传递到前端的是JSON类型的数据，此数据包含很多其他的成分，我们可以通过console.log()方法打印出该数据包含的具体成分，在从中拿到自己需要的数据）
//首先，我们需要遍历该数组（message为该数组，）
$.each(message,function(index.item){
//获取到了数...
 * 转自：Gdong Elvis ( http://www.gdcool.net )
 * @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
 function removeOptions(selectObj)
 if (typeof selectObj != 'object'
				一.获取select被选中的option的值
1.js实现
var selected = document.getElementById(‘selectedId’); //定位id
var index = selected.selectedIndex; // 选中索引
var text = selected.options[index].text; // 选中文本
var value = sele...
  <label for="country">国家:</label><br>
  <select id="country" name="country">
    <option value="">请选择</option>
    <option value="China">中国</option>
    <option value="USA">美国</option>
  </select>
  <label for="state">省份:</label><br>
  <select id="state" name="state">
    <option value="">请选择</option>
  </select>
  <label for="city">城市:</label><br>
  <select id="city" name="city">
    <option value="">请选择</option>
  </select>
</form> 
<!-- JavaScript 代码 -->
const countrySelect = document.getElementById('country');
const stateSelect = document.getElementById('state');
const citySelect = document.getElementById('city');
// 国家、省份、城市的数据
const data = {
  China: {
    Beijing: ['北京市'],
    Shanghai: ['上海市'],
    Guangdong: ['广州市', '深圳市']
  USA: {
    California: ['Los Angeles', 'San Francisco'],
    NewYork: ['New York City']
// 当国家选择发生改变时，更新省份的选项
countrySelect.addEventListener('change', () => {
  const country = countrySelect.value;
  stateSelect.innerHTML = '<option value="">请选择</option>';
  for (const state in data[country]) {
    stateSelect.innerHTML += `<option value="${state}">${state}</option>`;
// 当省份选择发生改变时，更新城市的选项
stateSelect.addEventListener('change', () => {
  const country = countrySelect.value;
  const state = stateSelect.value;
  citySelect.innerHTML = '<option value="">请选择</option>';
  for (const city of data[country][state]) {
    citySelect.innerHTML += `<option value="${city}">${city}</option>`;
这段代码中使用了三个下拉列表（即 `select` 元素）