逻辑的工作原理如下，用户从第一个<select>;
决定是否：
a）显示第二个<select>;或者，
b）两个输入字段“其他位置”和“其他学院”。
这一切都很顺利。
当我尝试在动态<select>中使用“onchange”事件来测试用户是否选择“其他”时，我遇到了问题。隐藏第二个<select>的代码和两个{{ 1}}字段，中断并显示它们应隐藏的全部3。
这是dynamic1的代码，这段代码基于“location”中选择的值完成它应该做的事情
<input>任何帮助将不胜感激......
答案 0 :(得分：0)
好的，我做了一些小的语法更改，似乎工作正常。如果这不符合预期，请告诉我。
<html>
<head>
<script>
function dynamic1(parent, child) { //You will have to adjust the parent arrays and the values assigned to them in order to insert the values of your choice
var parent_array = new Array();
parent_array[0] = ['Please select a location...'];
parent_array[1] = ['Please select a university ...', 'Macquarie University', 'UNSW', 'AICE', 'Sydney University', 'Western Sydney University', 'UWS', 'Australian Catholic University', 'Other'];
parent_array[2] = ['Please select a university..', 'University of Newcastle', 'Australian Catholic University', 'Other'];
parent_array[3] = ['Please select a university ...', 'Central Coast TAFE', 'Language College', 'Other'];
parent_array[4] = ['Please select a university', 'ANU', 'University of Canberra', 'Australian Catholic University', 'Other'];
parent_array[5] = ['Please select a university ...', 'Melbourne University', 'Monash University', 'Deakin University', 'Victoria University', 'Swinburne University', 'RMIT', 'Australian Catholic University', 'Other'];
parent_array[6] = ['Please select a university ...', 'University of Queensland', 'QUT', 'Australian Catholic University', 'Other'];
parent_array[7] = ['Please select a university ...', 'Edith Cowan', 'Murdoch', 'University of WA', 'WAAPA', 'Other'];
parent_array[8] = ['Please enter your city ...'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for (var i = 0; i < parent_array[parent_value].length; i++) {
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];
}
}
/*there is code above this that populates the dynamic <select> and has the css */
function handleCourseLocation() {
var e = document.getElementById('location');
var opt = e.options[e.selectedIndex];
var oln = document.getElementById('otherlocation');
var uni = document.getElementById('university');
var otuni = document.getElementById('otheruni');
if (opt.value == 0) {
oln.style.display = "none";
uni.style.display = "none";
otuni.style.display = "none";
} else if (opt.value == 8) {
oln.style.display = "";
uni.style.display = "none";
otuni.style.display = "";
} else {
oln.style.display = "none";
uni.style.display = "";
otuni.style.display = "none";
}
}
/* this is the function that fails */
function handleUni() {
var f = document.getElementById('university');
var optf = f.options[f.selectedIndex];
var otuni = document.getElementById('otheruni');
if(optf.text == "Other") {
otuni.style.display = "";
} else {
otuni.style.display = "none";
}
}
function dynamicCourse(parent, child) {
dynamic1(parent, child);
handleCourseLocation();
}
</script>
<style>
body {
padding-top: 60px;
/* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 40px;
/* 40 px to provide clearance at the bottom for a bottom fixed navbar*/
padding-left: 10%;
padding-right: 10%
}
select:invalid {
color: gray;
}
option:first {
color: gray;
}
</style>
</head>
<body onload="handleCourseLocation();">
<form class="form-horizontal">
<fieldset>
<legend>Details about you</legend>
<div class="control-group">
<label class="control-label" for="input-label">first name </label>
<div class="controls">
<input type="text" id="firstname" placeholder="e.g. Wendy, Min etc" maxlength="60" size="60" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">family name </label>
<div class="controls" </div>
<input type="text" id="lastname" placeholder="e.g. Xu, Smith etc" maxlength="60" size="60" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">your email </label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="email@somewhere.com" size="80" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">your birthday </label>
<div class="controls">
<input type="date" id="birthdate" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">gender </label>
<div class="controls">
<select class="span1" id="gender" />
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">telephone </label>
<div class="controls controls-row">
<input class="span1" type="text" id="country" placeholder="61" maxlength="3" />
<input class="span5" type="text" id="telnumber" placeholder="9999-9999" maxlength="10" />
</div>
</div>
</fieldset>
<p> </p>
<fieldset>
<legend>Details about your course</legend>
<p>We strive to make your travel time from your homestay to your institution to be less than 45 minutes. To achieve this we need to know when you start your course and where you will be studying when you are here.</p>
<div class="control-group">
<label class="control-label" for="input-label">start date </label>
<div class="controls">
<input type="date" id="cseStart" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">location </label>
<div class="controls controls-row">
<select class="span2" id="location" required onchange="dynamicCourse(this,'university');" />
<option value=0>Please select city or town ...</option>
<option value=1>Sydney</option>
<option value=2>Newcastle</option>
<option value=3>Gosford/Central Coast</option>
<option value=4>Canberra</option>
<option value=5>Melbourne</option>
<option value=6>Brisbane</option>
<option value=7>Perth</option>
<option value=8>Other city</option>
</select>
<input type="text" id="otherlocation" placeholder="please type the city or town your college is in" maxlength="60" size="42" />
<select class="span3" id="university" name="university" />
</select>
<input type="text" id="otheruni" placeholder="please type your university or college" maxlength="60" size="42" />
</div>
</fieldset>
<p> </p>
<fieldset>
<legend>Details about your homestay needs ...</legend>
<p>To help us find you a homestay family to meet your needs, we need to know a little more about what type of homestay you are looking for.</p>
</fieldset>
</form>
</div>
</fieldset>
</form>
</body>
</parent_array[parent_value].length;i++){>
</head>
</html>