Question

我在网上找到了国家/地区城市下拉代码。但我只想要州和城市。所以做了一些改动，但是它不能正常工作，这是编辑过的代码，请告诉我它有什么问题吗？谢谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<html>
<font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">
<head>

<!--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>

Answer 1

将ID state更改为State并将cities['maharashtra']更改为cities['Maharashtra']

试试这段代码：

<强> DEMO

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

}

Answer 2

您声明的html组件的ID为“州”，但您阅读的是“州”。最佳实践将在项目中使用 jQuery 。 jQuery将处理跨浏览器问题，并且在编码时会很方便。

Answer 3

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>

州城市下降不工作

3 个答案: