Fatal编程技术网
  • html/
  • Html 州立城市下拉列表不起作用

Html 州立城市下拉列表不起作用

html drop-down-menu

Html 州立城市下拉列表不起作用,html,drop-down-menu,Html,Drop Down Menu,我在网上找到了country state city下拉代码。但我只想要州和城市。所以做了一些修改，bt工作不正常，这是经过编辑的代码，请告诉我有什么问题？ 谢谢 <!--start head--> <title>State - City Dropdown</title> <script type="text/javascript"> // State lists var cities = new Array(); cities['Guja

我在网上找到了country state city下拉代码。但我只想要州和城市。所以做了一些修改，bt工作不正常，这是经过编辑的代码，请告诉我有什么问题？ 谢谢

<!--start head-->


<title>State - City Dropdown</title>

<script type="text/javascript">

// State lists
var cities = new Array();

cities['Gujarat'] = new Array('Ahmedabad','Vadodara','Surat');
cities['Rajasthan'] = new Array('Jaisalmer','Chittod','Jaipur');
cities['Maharashtra'] = new Array('Mumbai','Pune','Nasik');


// City lists


function setcities() {
  stateSel = document.getElementById('State');
  cityList = cities[stateSel.value];
  changeSelect('city', cityList, cityList);

}



function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setcities();
});
</script>



<fieldset style="width: 300px;">
<legend><strong>Make your selection</strong></legend>
<p>
<!-- <form name="test" method="POST" action="processingpage.php"> -->
<form>
<table>
<tr>
<td style="text-align: left;">States:</td>
<td style="text-align: left;">
<select name="State" id="State" onChange="setcities();">
  <option value="Gujarat">Gujarat</option>
  <option value="Rajasthan">Rajasthan</option>
  <option value="Maharashtra">Maharashtra</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="City" id="city" onChange="setcities();">
  <option value="">Please select a City </option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>
</font></body></html>


州-城市下拉列表
//州名单
var cities=新数组（）；
城市['Gujarat']=新阵列（'Ahmedabad'、'Vadodara'、'Surat'）；
城市['Rajasthan']=新阵列（'Jaisalmer'，'Chittod'，'Jaipur'）；
城市['maharashtra']=新阵列（'Mumbai'、'Pune'、'Nasik'）；
//城市名单
函数集（）{
stateSel=document.getElementById（'state'）；
cityList=城市[stateSel.value]；
更改选择（“城市”、“城市列表”、“城市列表”）；
}
函数更改选择（字段ID、新选项、新值）{
selectField=document.getElementById（fieldID）；
选择field.options.length=0；
对于（i=0；i
国家：
古吉拉特邦
拉贾斯坦邦
马哈拉施特拉邦
城市：
请选择一个城市
将id
状态更改为
状态
并将
城市['maharashtra']
更改为
城市['maharashtra']


<!--start head-->


<title>State - City Dropdown</title>

<script type="text/javascript">

// State lists
var cities = new Array();

cities['Gujarat'] = new Array('Ahmedabad','Vadodara','Surat');
cities['Rajasthan'] = new Array('Jaisalmer','Chittod','Jaipur');
cities['Maharashtra'] = new Array('Mumbai','Pune','Nasik');


// City lists


function setcities() {
  stateSel = document.getElementById('State');
  cityList = cities[stateSel.value];
  changeSelect('city', cityList, cityList);

}



function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setcities();
});
</script>



<fieldset style="width: 300px;">
<legend><strong>Make your selection</strong></legend>
<p>
<!-- <form name="test" method="POST" action="processingpage.php"> -->
<form>
<table>
<tr>
<td style="text-align: left;">States:</td>
<td style="text-align: left;">
<select name="State" id="State" onChange="setcities();">
  <option value="Gujarat">Gujarat</option>
  <option value="Rajasthan">Rajasthan</option>
  <option value="Maharashtra">Maharashtra</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="City" id="city" onChange="setcities();">
  <option value="">Please select a City </option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>
</font></body></html>


请尝试以下代码：


<!--start head-->


<title>State - City Dropdown</title>

<script type="text/javascript">

// State lists
var cities = new Array();

cities['Gujarat'] = new Array('Ahmedabad','Vadodara','Surat');
cities['Rajasthan'] = new Array('Jaisalmer','Chittod','Jaipur');
cities['Maharashtra'] = new Array('Mumbai','Pune','Nasik');


// City lists


function setcities() {
  stateSel = document.getElementById('State');
  cityList = cities[stateSel.value];
  changeSelect('city', cityList, cityList);

}



function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setcities();
});
</script>



<fieldset style="width: 300px;">
<legend><strong>Make your selection</strong></legend>
<p>
<!-- <form name="test" method="POST" action="processingpage.php"> -->
<form>
<table>
<tr>
<td style="text-align: left;">States:</td>
<td style="text-align: left;">
<select name="State" id="State" onChange="setcities();">
  <option value="Gujarat">Gujarat</option>
  <option value="Rajasthan">Rajasthan</option>
  <option value="Maharashtra">Maharashtra</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="City" id="city" onChange="setcities();">
  <option value="">Please select a City </option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>
</font></body></html>





function setcities() {
 var  stateSel = document.getElementById("State");
    console.log(stateSel);
  cityList = cities[stateSel.value];
  changeSelect('city', cityList, cityList);

}



<!--start head-->


<title>State - City Dropdown</title>

<script type="text/javascript">

// State lists
var cities = new Array();

cities['Gujarat'] = new Array('Ahmedabad','Vadodara','Surat');
cities['Rajasthan'] = new Array('Jaisalmer','Chittod','Jaipur');
cities['Maharashtra'] = new Array('Mumbai','Pune','Nasik');


// City lists


function setcities() {
  stateSel = document.getElementById('State');
  cityList = cities[stateSel.value];
  changeSelect('city', cityList, cityList);

}



function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setcities();
});
</script>



<fieldset style="width: 300px;">
<legend><strong>Make your selection</strong></legend>
<p>
<!-- <form name="test" method="POST" action="processingpage.php"> -->
<form>
<table>
<tr>
<td style="text-align: left;">States:</td>
<td style="text-align: left;">
<select name="State" id="State" onChange="setcities();">
  <option value="Gujarat">Gujarat</option>
  <option value="Rajasthan">Rajasthan</option>
  <option value="Maharashtra">Maharashtra</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="City" id="city" onChange="setcities();">
  <option value="">Please select a City </option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>
</font></body></html>



您声明的html组件id为“State”，但您正在读取“State”。最佳做法是在项目中使用jQuery。jQuery将处理跨浏览器问题，并且在编码时非常方便。
javaScript属性区分大小写

<!--start head-->


<title>State - City Dropdown</title>

<script type="text/javascript">

// State lists
var cities = new Array();

cities['Gujarat'] = new Array('Ahmedabad','Vadodara','Surat');
cities['Rajasthan'] = new Array('Jaisalmer','Chittod','Jaipur');
cities['Maharashtra'] = new Array('Mumbai','Pune','Nasik');


// City lists


function setcities() {
  stateSel = document.getElementById('State');
  cityList = cities[stateSel.value];
  changeSelect('city', cityList, cityList);

}



function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setcities();
});
</script>



<fieldset style="width: 300px;">
<legend><strong>Make your selection</strong></legend>
<p>
<!-- <form name="test" method="POST" action="processingpage.php"> -->
<form>
<table>
<tr>
<td style="text-align: left;">States:</td>
<td style="text-align: left;">
<select name="State" id="State" onChange="setcities();">
  <option value="Gujarat">Gujarat</option>
  <option value="Rajasthan">Rajasthan</option>
  <option value="Maharashtra">Maharashtra</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="City" id="city" onChange="setcities();">
  <option value="">Please select a City </option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>
</font></body></html>


您已使用state for state和maharashtra for maharashtra更正它或
使用以下代码，



<!--start head-->


<title>State - City Dropdown</title>

<script type="text/javascript">

// State lists
var cities = new Array();

cities['Gujarat'] = new Array('Ahmedabad','Vadodara','Surat');
cities['Rajasthan'] = new Array('Jaisalmer','Chittod','Jaipur');
cities['Maharashtra'] = new Array('Mumbai','Pune','Nasik');


// City lists


function setcities() {
  stateSel = document.getElementById('State');
  cityList = cities[stateSel.value];
  changeSelect('city', cityList, cityList);

}



function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setcities();
});
</script>



<fieldset style="width: 300px;">
<legend><strong>Make your selection</strong></legend>
<p>
<!-- <form name="test" method="POST" action="processingpage.php"> -->
<form>
<table>
<tr>
<td style="text-align: left;">States:</td>
<td style="text-align: left;">
<select name="State" id="State" onChange="setcities();">
  <option value="Gujarat">Gujarat</option>
  <option value="Rajasthan">Rajasthan</option>
  <option value="Maharashtra">Maharashtra</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="City" id="city" onChange="setcities();">
  <option value="">Please select a City </option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>
</font></body></html>




州-城市下拉列表
//州名单
var cities=新数组（）；
城市['Gujarat']=新阵列（'Ahmedabad'、'Vadodara'、'Surat'）；
城市['Rajasthan']=新阵列（'Jaisalmer'，'Chittod'，'Jaipur'）；
城市['Maharashtra']=新阵列（'Mumbai'、'Pune'、'Nasik'）；
//城市名单
函数集（）{
stateSel=document.getElementById（'State'）；
cityList=城市[stateSel.value]；
更改选择（“城市”、“城市列表”、“城市列表”）；
}
函数更改选择（字段ID、新选项、新值）{
selectField=document.getElementById（fieldID）；
选择field.options.length=0；
对于（i=0；i
国家：
古吉拉特邦
拉贾斯坦邦
马哈拉施特拉邦
城市：
请选择一个城市