使用动态<选择>以显示<输入类型＝“;文本>
Using the value of a dynamic <select> to show an <input type="text>
我正在为我的业务构建一个表单，其中我使用两个<select>字段（第二个<select>依赖于第一个<select>中的值来填充它）和两个<input type="text">字段
逻辑是这样工作的，用户从第一个<select>中选择一个位置；
- 一场"变革"大火；并且
-
确定是否：
a） 示出第二CCD_ 6；或者，
b） 两个输入字段"其他地点"answers"其他学院"。
这一切都很顺利。
当我试图在动态<select>中使用"onchange"事件来测试用户是否选择"Other"时，我遇到了问题。隐藏第二个<select>和两个<input>字段的代码会在应该隐藏的时候中断并显示所有3个字段。这是dynamic1的代码，这个代码根据在"位置"中选择的值来做它应该做的事情
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>
任何帮助都将不胜感激。。。
好的，我做了一些小的语法更改，它似乎运行良好。如果这不是预期的，请告诉我。
<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>
相关文章：
- 在<页眉>标签
- 如何更改<svg>标记为<img>用js标记
- 如何逃离<>在javascript下划线模板中
- 有没有一种方法可以检测ios<>使用jquery和触发器操作形成导航按钮
- 正则表达式，它允许除“”之外的所有字符<>_;{}[]”;
- ajax调用:响应<->数据类型
- 如果所有三个文本框<>然后是100%
- CORS的问题.烧瓶<->AngularJS
- 有没有一种方法可以创建与Java<->JSON映射对象，如JSON.stringfy(jsObject）创建的
- 什么是%<>%调用了语法
- JavaScript返回值:What dos<>意思是
- JavaScript中哪种类型的值对应于Java`List<>`
- 如何发送类似“<>"在参数中使用$.ajax-to-server
- 不等于<>操作员不工作
- jquery附加函数转换<>到实体名称
- 只有当超过3个元素时才显示更多内容按钮，否则不显示.使用jquery's:lt:gt
- 为什么在<>ckeditor中不支持
- url有效性的Java脚本regexp，带有<>
- 设计Javascript前端<->C++后端通信
- 比较查询运算符ObjectId<->日期
