2017-05-07 289 views
0

所以我一直在做這個html文件,我已經嘗試添加一個下拉菜單,你可以澳大利亞和新西蘭以及相應的狀態之間選擇出現在「選擇國家」下拉列表。HTML下拉框不能正常工作

<div id="mydiv2"> 
<section> 
<div style="text-align:center;"> 
<form name="myFirstForm" autocomplete="on"> 
<p> 
<meter min="0" low="20" high="80" optimum="90" max="100" 
value="0">Space left: </meter> 0% 
</p> 
<fieldset style =" margin-left:-20px; padding-top: 0.35em; padding-bottom: 
0.625em; padding-left: 0.75em;"> 
<p> 
<meter min="0" low="20" high="80" optimum="90" max="100" 
value="0">Space left: </meter> 0% 
</p> 
<legend> Register New User</legend> 
<div id="mydiv"> 
<p><label>Username: <input type="text" name="username" placeholder="enter a new username" pattern="[a-zA-Z0-9]{12}" required+"true" onblur="return validateErrors('username','usernameError')" /> </label></p> 
</div> 
<span id="usernameError" style="display: none;"></span> 
<script> 
if (!("autofocus" in document.createElement("input"))) { 
document.getElementById("username").focus(); 
} 
</script> 
<div id="mydiv"> 
<p><label>Password: <input type="password" name="password" required pattern="[A-Z]{3}-[a-z]{3}" title="###- 
### with 3 capitals followed by a - and 3 lower case letters" placeholder="6  digits or more" /> </label></p> 
</div> 
</fieldset > 
<fieldset style =" margin-left:-20px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 0.75em;"> 
<legend> Personal Details</legend> 
<legend></legend> 
<div id="mydiv"> 
<p><label>Name: <input type="text" name="Name" 
autofocus="autofocus" required="true" placeholder="first and last name" title="Must contain no numbers" /> </label></p> 
</div> 
<div id="mydiv"> 
<p><label>Address: <input type="text" name="address" required="true" placeholder="street number and name" /> </label></p> 
</div> 
<div id="mydiv"> 
<p><label>Suburb: <input type="text" name="address" required="true" placeholder="suburb" /> </label></p> 
</div> 
<div id="mydiv"> 
<p><label>City: <input type="text" name="address" required="true" 
    placeholder="city" /> </label></p> 
</div> 
</br> 


Select Country: <select id="country" name ="country"></select> <br/><br/> 
Select State: <select name ="state" id ="state"></select> <br/> 

<script language="javascript"> 
populateCountries("country", "state"); // first parameter is id of country 
drop-down and second parameter is id of state drop-down 
populateCountries("country2"); 
populateCountries("country2"); 
</script> 
<div id="mydiv"> 
<p><label>Postcode: <input type="text" name="address" required="true" 
title="Must be 4 numbers" placeholder="0000" /> </label></p> 
</div> 
<div id="mydiv"> 
<p><label>Email: <input type="text" name="address" title="Must contain a @ and a ." placeholder="[email protected]" required="true" pattern="[^@][email protected][^@]+\.[a-zA-Z]{2,6}" /> </label></p> 
</div> 
<div id="mydiv"> 
<p><label>Phone: <input type="text" name="address" required="true" title="Must be 10 digits" placeholder="(00)-000-0000" /> </label></p> 
</div> 
<div id="mydiv"> 
<p><label>Website: <input type="text" name="address" required="true" title="Must contain a www and a ." placeholder="https://www.example.com.au" />  
</label></p> 
</div> 
<div id="mydiv"> 
<p><label>Age: <input type="text" name="address" required="true" title="Must be numeric" placeholder="" /> </label></p> 
</fieldset> 
<fieldset style ="background-color:#4682b4; margin-left: 0px; margin-right: 
800px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 
0.75em;width:100%;"> 
<p>Spam Check</p> 
<p><label>What colour is black?(Choose a colour)<input type="color" 
name="carcolor" /></label></p> 
<script> 
function checkRegistration(){ 
if(!form_valid){ 
    alert('Given data is not correct'); 
    return false; 
} 
return true; 
} 
</script> 
<FORM METHOD="LINK" ACTION="Form3.html"> 
<INPUT TYPE="submit" VALUE="Continue"> 
</FORM> 
</fieldset> 
</div> 
</form> 
</div> 
</section> 
</body> 
</html> 

但是,我遇到的問題是,動態狀態和國家的下拉菜單根本無法正常工作,我嘗試了幾乎所有的東西。

var country_arr = new Array("Australia","New Zealand"); 
// States 
var s_a = new Array(); 
s_a[0]=""; 
s_a[1]="Australian Capital Territory|New South Wales|Northern Territory|Queensland|South Australia|Tasmania|Victoria|Western Australia"; 
s_a[2]="Akaroa|Amuri|Ashburton|Bay of Islands|Bruce|Buller|Chatham Islands|Cheviot|Clifton|Clutha|Cook|Dannevirke|Egmont|Eketahuna|Ellesmere|Eltham|Eyre|Featherston|Franklin|Golden Bay|Great Barrier Island|Grey|Hauraki Plains|Hawera|Hawke's Bay|Heathcote|Hikurangi|Hobson|Hokianga|Horowhenua|Hurunui|Hutt|Inangahua|Inglewood|Kaikoura|Kairanga|Kiwitea|Lake|Mackenzie|Malvern|Manaia|Manawatu|Mangonui|Maniototo|Marlborough|Masterton|Matamata|Mount Herbert|Ohinemuri|Opotiki|Oroua|Otamatea|Otorohanga|Oxford|Pahiatua|Paparua|Patea|Piako|Pohangina|Raglan|Rangiora|Rangitikei|Rodney|Rotorua|Runanga|Saint Kilda|Silverpeaks|Southland|Stewart Island|Stratford|Strathallan|Taranaki|Taumarunui|Taupo|Tauranga|Thames-Coromandel|Tuapeka|Vincent|Waiapu|Waiheke|Waihemo|Waikato|Waikohu|Waimairi|Waimarino|Waimate|Waimate West|Waimea|Waipa|Waipawa|Waipukurau|Wairarapa South|Wairewa|Wairoa|Waitaki|Waitomo|Waitotara|Wallace|Wanganui|Waverley|Westland|Whakatane|Whangarei|Whangaroa|Woodville"; 



function populateStates(countryElementId, stateElementId){ 

var selectedCountryIndex = document.getElementById(countryElementId 
).selectedIndex; 

var stateElement = document.getElementById(stateElementId); 

stateElement.length=0; // Fixed by Julian Woods 
stateElement.options[0] = new Option('Select State',''); 
stateElement.selectedIndex = 0; 

var state_arr = s_a[selectedCountryIndex].split("|"); 

for (var i=0; i<state_arr.length; i++) { 
    stateElement.options[stateElement.length] = new 
Option(state_arr[i],state_arr[i]); 
} 
} 

function populateCountries(countryElementId, stateElementId){ 
// given the id of the <select> tag as function argument, it inserts 
<option> tags 
var countryElement = document.getElementById(countryElementId); 
countryElement.length=0; 
countryElement.options[0] = new Option('Select Country','-1'); 
countryElement.selectedIndex = 0; 
for (var i=0; i<country_arr.length; i++) { 
    countryElement.options[countryElement.length] = new Option(country_arr[i],country_arr[i]); 
} 

// Assigned all countries. Now assign event listener for the states. 

if(stateElementId){ 
    countryElement.onchange = function(){ 
     populateStates(countryElementId, stateElementId); 
    }; 
} 
} 
function checkSubmit() 
{ 
if (all validations are ok) 
    { 
     return true; 
     } 
    else 
    { 
     return false; 
    } 
} 

無論我嘗試下拉菜單,都無法正常工作。如果有人能指出我出錯的地方,我會非常感激。 謝謝。

回答

0

我相信你,你的內聯JS在單獨的文件中的Javascript執行之前。你如何引用外部Javascript?

P.S.你應該避免內嵌JavaScript,而應該使用事件監聽器。這裏有一個你的確切代碼的工作小提琴,內嵌JavaScript提取到外部文件。

http://jsfiddle.net/6kx9um8o/

var country_arr = new Array("Australia", "New Zealand"); 
 
// States 
 
var s_a = new Array(); 
 
s_a[0] = ""; 
 
s_a[1] = "Australian Capital Territory|New South Wales|Northern Territory|Queensland|South Australia|Tasmania|Victoria|Western Australia"; 
 
s_a[2] = "Akaroa|Amuri|Ashburton|Bay of Islands|Bruce|Buller|Chatham Islands|Cheviot|Clifton|Clutha|Cook|Dannevirke|Egmont|Eketahuna|Ellesmere|Eltham|Eyre|Featherston|Franklin|Golden Bay|Great Barrier Island|Grey|Hauraki Plains|Hawera|Hawke's Bay|Heathcote|Hikurangi|Hobson|Hokianga|Horowhenua|Hurunui|Hutt|Inangahua|Inglewood|Kaikoura|Kairanga|Kiwitea|Lake|Mackenzie|Malvern|Manaia|Manawatu|Mangonui|Maniototo|Marlborough|Masterton|Matamata|Mount Herbert|Ohinemuri|Opotiki|Oroua|Otamatea|Otorohanga|Oxford|Pahiatua|Paparua|Patea|Piako|Pohangina|Raglan|Rangiora|Rangitikei|Rodney|Rotorua|Runanga|Saint Kilda|Silverpeaks|Southland|Stewart Island|Stratford|Strathallan|Taranaki|Taumarunui|Taupo|Tauranga|Thames-Coromandel|Tuapeka|Vincent|Waiapu|Waiheke|Waihemo|Waikato|Waikohu|Waimairi|Waimarino|Waimate|Waimate West|Waimea|Waipa|Waipawa|Waipukurau|Wairarapa South|Wairewa|Wairoa|Waitaki|Waitomo|Waitotara|Wallace|Wanganui|Waverley|Westland|Whakatane|Whangarei|Whangaroa|Woodville"; 
 

 

 
function populateStates(countryElementId, stateElementId) { 
 

 
    var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex; 
 

 
    var stateElement = document.getElementById(stateElementId); 
 

 
    stateElement.length = 0; // Fixed by Julian Woods 
 
    stateElement.options[0] = new Option('Select State', ''); 
 
    stateElement.selectedIndex = 0; 
 

 
    var state_arr = s_a[selectedCountryIndex].split("|"); 
 

 
    for (var i = 0; i < state_arr.length; i++) { 
 
     stateElement.options[stateElement.length] = new 
 
     Option(state_arr[i], state_arr[i]); 
 
    } 
 
} 
 

 
function populateCountries(countryElementId, stateElementId) { 
 
    // given the id of the <select> tag as function argument, it inserts 
 
    //<option> tags 
 
    var countryElement = document.getElementById(countryElementId); 
 
    countryElement.length = 0; 
 
    countryElement.options[0] = new Option('Select Country', '-1'); 
 
    countryElement.selectedIndex = 0; 
 
    for (var i = 0; i < country_arr.length; i++) { 
 
     countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]); 
 
    } 
 

 
    // Assigned all countries. Now assign event listener for the states. 
 

 
    if (stateElementId) { 
 
     countryElement.onchange = function() { 
 
      populateStates(countryElementId, stateElementId); 
 
     }; 
 
    } 
 
} 
 

 
function checkSubmit() { 
 
    if (true) { 
 
     return true; 
 
    } else { 
 
     return false; 
 
    } 
 
} 
 

 

 
populateCountries("country", "state"); // first parameter is id of country 
 
//drop-down and second parameter is id of state drop-down 
 
populateCountries("country2"); 
 
populateCountries("country2");
<div id="mydiv2"> 
 
<section> 
 
<div style="text-align:center;"> 
 
<form name="myFirstForm" autocomplete="on"> 
 
<p> 
 
<meter min="0" low="20" high="80" optimum="90" max="100" 
 
value="0">Space left: </meter> 0% 
 
</p> 
 
<fieldset style =" margin-left:-20px; padding-top: 0.35em; padding-bottom: 
 
0.625em; padding-left: 0.75em;"> 
 
<p> 
 
<meter min="0" low="20" high="80" optimum="90" max="100" 
 
value="0">Space left: </meter> 0% 
 
</p> 
 
<legend> Register New User</legend> 
 
<div id="mydiv"> 
 
<p><label>Username: <input type="text" name="username" placeholder="enter a new username" pattern="[a-zA-Z0-9]{12}" required+"true" onblur="return validateErrors('username','usernameError')" /> </label></p> 
 
</div> 
 
<span id="usernameError" style="display: none;"></span> 
 
<script> 
 
if (!("autofocus" in document.createElement("input"))) { 
 
document.getElementById("username").focus(); 
 
} 
 
</script> 
 
<div id="mydiv"> 
 
<p><label>Password: <input type="password" name="password" required pattern="[A-Z]{3}-[a-z]{3}" title="###- 
 
### with 3 capitals followed by a - and 3 lower case letters" placeholder="6  digits or more" /> </label></p> 
 
</div> 
 
</fieldset > 
 
<fieldset style =" margin-left:-20px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 0.75em;"> 
 
<legend> Personal Details</legend> 
 
<legend></legend> 
 
<div id="mydiv"> 
 
<p><label>Name: <input type="text" name="Name" 
 
autofocus="autofocus" required="true" placeholder="first and last name" title="Must contain no numbers" /> </label></p> 
 
</div> 
 
<div id="mydiv"> 
 
<p><label>Address: <input type="text" name="address" required="true" placeholder="street number and name" /> </label></p> 
 
</div> 
 
<div id="mydiv"> 
 
<p><label>Suburb: <input type="text" name="address" required="true" placeholder="suburb" /> </label></p> 
 
</div> 
 
<div id="mydiv"> 
 
<p><label>City: <input type="text" name="address" required="true" 
 
    placeholder="city" /> </label></p> 
 
</div> 
 
</br> 
 

 

 
Select Country: <select id="country" name ="country"></select> <br/><br/> 
 
Select State: <select name ="state" id ="state"></select> <br/> 
 

 
<div id="mydiv"> 
 
<p><label>Postcode: <input type="text" name="address" required="true" 
 
title="Must be 4 numbers" placeholder="0000" /> </label></p> 
 
</div> 
 
<div id="mydiv"> 
 
<p><label>Email: <input type="text" name="address" title="Must contain a @ and a ." placeholder="[email protected]" required="true" pattern="[^@][email protected][^@]+\.[a-zA-Z]{2,6}" /> </label></p> 
 
</div> 
 
<div id="mydiv"> 
 
<p><label>Phone: <input type="text" name="address" required="true" title="Must be 10 digits" placeholder="(00)-000-0000" /> </label></p> 
 
</div> 
 
<div id="mydiv"> 
 
<p><label>Website: <input type="text" name="address" required="true" title="Must contain a www and a ." placeholder="https://www.example.com.au" />  
 
</label></p> 
 
</div> 
 
<div id="mydiv"> 
 
<p><label>Age: <input type="text" name="address" required="true" title="Must be numeric" placeholder="" /> </label></p> 
 
</fieldset> 
 
<fieldset style ="background-color:#4682b4; margin-left: 0px; margin-right: 
 
800px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 
 
0.75em;width:100%;"> 
 
<p>Spam Check</p> 
 
<p><label>What colour is black?(Choose a colour)<input type="color" 
 
name="carcolor" /></label></p> 
 
<script> 
 
function checkRegistration(){ 
 
if(!form_valid){ 
 
    alert('Given data is not correct'); 
 
    return false; 
 
} 
 
return true; 
 
} 
 
</script> 
 
<FORM METHOD="LINK" ACTION="Form3.html"> 
 
<INPUT TYPE="submit" VALUE="Continue">