2016-04-30 75 views
1

我建立了自己的公司形式,我用两个<select>场(第2 <select>依靠值在第一<select>填充它)和2个<input type="text">字段使用的动态<select>值显示一个<input type =“text>中

的逻辑是这样工作的,用户选择从第一<select>的位置;

  1. 一个“平变化”火灾;以及,
  2. 确定是否:

    a)显示第二个<select>;或者,

    b)两个输入字段“其他位置”和“其他学院”。

    这一切都运作良好。

我遇到问题时,我尝试,如果用户选择“其它隐藏第二<select>和两个<input>场,休息和展示的代码使用一个“的onchange”事件在动态<select>测试所有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 &nbsp;</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 &nbsp;</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 &nbsp;</label> 
       <div class="controls"> 
        <input type="email" id="inputEmail" placeholder="[email protected]" size="80"/> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="input-label">your birthday &nbsp;</label> 
       <div class="controls"> 
        <input type="date" id="birthdate"/> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="input-label">gender &nbsp;</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 &nbsp;</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> &nbsp;</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&nbsp;</label> 
       <div class="controls"> 
        <input type="date" id="cseStart"/> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="input-label">location &nbsp;</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> &nbsp;</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> 

任何帮助,将不胜感激...

+0

你可以举一个例子,“大学”的内容是什么样的? 'handleUni'是否会被'大学'的'onchange'事件调用? – NOBrien

+0

为什么jQuery标签,你在找一个写在里面的吗? – j08691

回答

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 &nbsp;</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 &nbsp;</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 &nbsp;</label> 
       <div class="controls"> 
        <input type="email" id="inputEmail" placeholder="[email protected]" size="80" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="input-label">your birthday &nbsp;</label> 
       <div class="controls"> 
        <input type="date" id="birthdate" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="input-label">gender &nbsp;</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 &nbsp;</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> &nbsp;</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&nbsp;</label> 
       <div class="controls"> 
        <input type="date" id="cseStart" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="input-label">location &nbsp;</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> &nbsp;</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> 
+0

这里是函数dynamic1。 –