使用的動態<select>值顯示一個<input type =「text>中

我建立了自己的公司形式，我用兩個<select>場（第2 <select>依靠值在第一<select>填充它）和2個<input type="text">字段使用的動態<select>值顯示一個<input type =「text>中

的邏輯是這樣工作的，用戶選擇從第一<select>的位置;

一個「平變化」火災;以及，
確定是否：

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>

任何幫助，將不勝感激...

來源

2016-04-30 Stephen Holland

你可以舉一個例子，「大學」的內容是什麼樣的？ 'handleUni'是否會被'大學'的'onchange'事件調用？ – NOBrien

爲什麼jQuery標籤，你在找一個寫在裏面的嗎？ – j08691

好吧，我做了一些小的語法修改，它似乎工作正常。如果這不符合預期，請告訴我。

<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>

來源

2016-04-30 17:53:19

這裏是函數dynamic1。 –

使用的動態<select>值顯示一個<input type =「text>中

回答

相關問題