Question

所以我一直在研究这个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="me@example.com"  required="true" pattern="[^@]+@[^@]+\.[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;
    }
}

无论我尝试什么，下拉列表都不起作用。如果有人能指出我出错的地方，我会非常感激。感谢。

Answer 1

我相信你是内联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="me@example.com"  required="true" pattern="[^@]+@[^@]+\.[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">

HTML下拉列表无法正常工作

1 个答案: