2014-01-31 3 views
0

Я нашел код страны страны, выпадающий из системы. Но я просто хотел штата и города. поэтому сделал некоторые изменения, bt его не работает должным образом, это отредактированный код, пожалуйста, скажите мне, что с ним случилось? спасибо.государственный город выпадающий график не работает

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

ответ

0

атрибуты 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> 
0

Изменить идентификатор 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); 

} 
0

HTML-компонент, который объявил это с идентификатором, как ' St ate 'но вы читаете для' состояние '. Лучшая практика будет использовать jQuery в проекте. jQuery позаботится о проблемах с перекрестным браузером и будет удобен при кодировании.

Смежные вопросы