den Wert eines dynamischen <select> Unter Verwendung eines zeigen <input type = "text>

Question

ich ein Formular für mein Geschäft bin Gebäude, wo ich zwei <select> Felder (die zweite <select> stützt sich auf Werte in der ersten <select> um es zu füllen) und zwei <input type="text"> Felder

die Logik funktioniert wie folgt, wählt der Benutzer einen Ort aus dem 1. <select>;

1. ein "onchange" Feuer, und

2. ob bestimmt:

   a) zeigen die zweite <select>; oder,

   b) die zwei Eingabefelder "Anderer Ort" und "Anderes Kollegium".

   Das alles funktioniert gut.

ich auf Probleme stoßen, wenn ich versuche, eine „onchange“ Ereignis in der dynamischen <select> zu verwenden, zu testen, ob der Benutzer „Andere. Der Code, der die zweite <select> und die beiden <input> Felder, Pausen und zeigen versteckt 3 alle, wenn sie ausgeblendet werden sollen. Hier ist der Code für Dynamic1 ist dieser Code tut, was seine tun soll, basierend auf dem Wert in „location“ ausgewählt

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@somewhere.com" 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> 

Jede mögliche Hilfe würde geschätzt ...

Answer 1

Okay, ich habe ein paar kleinere Syntaxänderungen vorgenommen und es scheint gut zu funktionieren. Lassen Sie mich wissen, wenn dies nicht wie erwartet ist.

<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@somewhere.com" 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>