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;
}
}
無論我嘗試下拉菜單,都無法正常工作。如果有人能指出我出錯的地方,我會非常感激。 謝謝。