1. 首頁
  2. 問答
  3. 根據輸入字段設置下拉列表值

根據輸入字段設置下拉列表值

2015-11-19 89 views
0

我是JavaScript新手。我將下拉列表值輸入到輸入字段中。我正在成功地做到這一點。當我嘗試在下拉列表中已經存在的輸入字段中輸入值時，函數調用會顯示正確的值。分區標籤下拉改變，但subcatagory div下拉列表值不會改變，直到我點擊該div。如何改變這一點？ 任何幫助，將不勝感激根據輸入字段設置下拉列表值

function fields() { 
 
    var seldprt = document.getElementById("seldprt"); 
 
    var section = seldprt.value; 
 
    var dprt_input = section; 
 
    var input_Department = document.getElementById("departmentinput"); 
 
    input_Department.value = dprt_input; 
 
    
 
    if (section == "Finance") { 
 
     document.getElementById("FinanceDiv").style.display = ""; 
 
     document.getElementById("SalesDiv").style.display = "none"; 
 
     document.getElementById("ITDiv").style.display = "none"; 
 
     var subsection = document.getElementById("FinanceDiv_subcatagory"); 
 
     var input_Subcatagory = document.getElementById("subcatagoryinput"); 
 
     input_Subcatagory.value = sub_catagory_input; 
 
    } else if (section == "Sales") \t { \t 
 
     document.getElementById("SalesDiv").style.display = ""; 
 
     document.getElementById("FinanceDiv").style.display = "none"; 
 
     document.getElementById("ITDiv").style.display = "none"; 
 
     var subsection = document.getElementById("SalesDiv_subcatagory"); 
 
     var sub_catagory_input = subsection.value; 
 
     var input_Subcatagory = document.getElementById("subcatagoryinput"); 
 
     input_Subcatagory.value=sub_catagory_input; 
 
\t \t \t 
 
    } else if (section == "IT") \t { \t 
 
     document.getElementById("ITDiv").style.display = ""; 
 
     document.getElementById("SalesDiv").style.display = "none"; 
 
     document.getElementById("FinanceDiv").style.display = "none"; 
 
     var subsection = document.getElementById("ITDiv_subcatagory"); 
 
     var sub_catagory_input = subsection.value; 
 
     var input_Subcatagory = document.getElementById("subcatagoryinput"); 
 
     input_Subcatagory.value=sub_catagory_input; \t 
 
    } \t \t \t \t 
 
} 
 

 
function previous_values() { 
 
    var input_Department = document.getElementById("departmentinput").value; 
 
    var input_Subcatagory = document.getElementById("subcatagoryinput").value; 
 
    alert(input_Department+","+input_Subcatagory); 
 
    //seldprt.value = input_Department; \t 
 
    if(input_Department != null) { 
 
     alert(); 
 
     var seldprt = document.getElementById("seldprt"); 
 
     seldprt.value = input_Department; \t 
 
     var Finance_subsection = document.getElementById("FinanceDiv_subcatagory"); 
 
     var Sales_subsection = document.getElementById("SalesDiv_subcatagory"); 
 
     var ITDiv_subsection = document.getElementById("ITDiv_subcatagory"); 
 
     if (input_Department == "Finance") { 
 
      document.getElementById("FinanceDiv_subcatagory").value = input_Subcatagory; 
 
      //Finance_subsection.value = input_Subcatagory; 
 
      //alert(Finance_subsection+"Finance_subsection"); \t \t 
 
     } 
 
     if (input_Department == "Sales") { 
 
      document.getElementById("SalesDiv_subcatagory").value = input_Subcatagory; \t 
 
      //alert(Sales_subsection.value+"subsection value"); 
 
     } \t 
 
     if(input_Department=="IT") { 
 
      document.getElementById("ITDiv_subcatagory").value = input_Subcatagory; 
 
      //alert(ITDiv_subsection+"subsection value"); 
 
     } 
 
     //alert("if block"+seldprt.value+","+Finance_subsection.value+","+Sales_subsection.value+","+ITDiv_subsection.value); 
 
\t \t \t \t \t \t \t \t \t 
 
    } /* else { 
 
     var seldprt = document.getElementById("seldprt"); 
 
     seldprt.value = input_Department; 
 
     alert("else block"+seldprt.value); 
 
     var Finance_subsection = document.getElementById("FinanceDiv_subcatagory"); 
 
     Finance_subsection.value = input_Department; 
 
     var Sales_subsection = document.getElementById("SalesDiv_subcatagory"); 
 
     Sales_subsection.value = input_Department; \t \t 
 
     var ITDiv_subsection = document.getElementById("ITDiv_subcatagory"); 
 
     ITDiv_subsection.value = input_Department; 
 
     alert("else block"); 
 
\t \t \t 
 
    } */ 
 
} \t
<body onload="preparePage();fields();previous_values();" > 
 
\t <div class="title"><%=getUserName(request)%>'s Emergency Contact</div><hr/> 
 
\t <div class="instructions">Please provide the name and telephone number of a person that we may contact in case of an emergency.</div> 
 
<div class="container" onclick="fields()"> 
 
<div onchange = "" class="departmentdiv"> 
 
    <label>Department:</label> 
 
    <div align="right" class="selectdiv"> 
 
    <select id = "seldprt"> 
 
    <option value = "Finance">Finance</option> 
 
    <option value = "Sales">Sales</option> 
 
    <option value = "IT">IT</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
    
 
    
 
<div id="FinanceDiv" onclick="" class="subcatagorydiv" > 
 
    <label>Section Name:</label> 
 
    <div align="right" class="selectdiv"> 
 
    <select id = "FinanceDiv_subcatagory"> 
 
    <option value = "Reimbursment">Reimbursment</option> 
 
    <option value = "Billing">Billing</option> 
 
    <option value = "Salaries">Salaries</option> 
 
    </select> 
 
    </div> 
 
    
 
</div> 
 
<div id="SalesDiv" onclick="previous_values()" class="subcatagorydiv" style="display:none;"> 
 
    <label>Section Name:</label> 
 
    <div align="right" class="selectdiv"> 
 
    <select id = "SalesDiv_subcatagory"> 
 
    <option value = "Total Sales">Total Sales</option> 
 
    <option value = "Purchases">Purchases</option> 
 
    <option value = "BestProduct">BestProduct</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div id="ITDiv" onclick="previous_values()" class="subcatagorydiv" style="display:none;" > 
 
    <label>Section Name:</label> 
 
    <div align="right" class="selectdiv"> 
 
    <select id = "ITDiv_subcatagory"> 
 
    <option value = "Internee">Internee</option> 
 
    <option value = "Associates">Associates</option> 
 
    <option value = "Managers">Managers</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
</div> 
 

 

 
\t \t <form action="" method="post" > 
 
\t \t \t <div class="entry" onclick="previous_values()">Name</div> 
 
\t \t \t <input type="text" name="name" id="departmentinput"> 
 
\t \t \t <div class="entry" onchange="previous_values()">Telephone Number</div> 
 
\t \t \t <input type="text" name="telephone" id="subcatagoryinput"> 
 
\t \t \t <div id="readwrite_buttons" class="hide"> 
 
\t \t \t \t <button id="ok" onclick="document.forms[0].submit();return false;">OK</button> 
 
\t \t \t \t <button id="cancel" onclick="javascript:window.close();return false;">Cancel</button> 
 
\t \t \t </div> 
 
\t \t \t <div id="readonly_buttons" class="hide"> 
 
\t \t \t \t <button id="back" onclick="javascript:window.close();return false;">Back</button> 
 
\t \t \t </div> 
 
\t \t </form> 
 
\t </body>

來源

2015-11-19 umair.ashfr

回答

0

您需要連接上<select>元素（seldprt）的onchange事件調用fields()。另外 - onchange事件不適用於div元素。

這是有效的，因爲您已經編寫了fields()來讀取新值並重新呈現DOM。我老實說沒讀過其他的代碼。

你可能已經爲你的目的寫了太多的代碼，但沒關係，因爲你還在學習。我建議用最少的功能重寫，驗證每個作品，然後一次添加更多的功能。

見固定片段：

function fields() { 
 
    var seldprt = document.getElementById("seldprt"); 
 
    var section = seldprt.value; 
 
    var dprt_input = section; 
 
    var input_Department = document.getElementById("departmentinput"); 
 
    input_Department.value = dprt_input; 
 
    
 
    if (section == "Finance") { 
 
     document.getElementById("FinanceDiv").style.display = ""; 
 
     document.getElementById("SalesDiv").style.display = "none"; 
 
     document.getElementById("ITDiv").style.display = "none"; 
 
     var subsection = document.getElementById("FinanceDiv_subcatagory"); 
 
     var input_Subcatagory = document.getElementById("subcatagoryinput"); 
 
     input_Subcatagory.value = sub_catagory_input; 
 
    } else if (section == "Sales") \t { \t 
 
     document.getElementById("SalesDiv").style.display = ""; 
 
     document.getElementById("FinanceDiv").style.display = "none"; 
 
     document.getElementById("ITDiv").style.display = "none"; 
 
     var subsection = document.getElementById("SalesDiv_subcatagory"); 
 
     var sub_catagory_input = subsection.value; 
 
     var input_Subcatagory = document.getElementById("subcatagoryinput"); 
 
     input_Subcatagory.value=sub_catagory_input; 
 
\t \t \t 
 
    } else if (section == "IT") \t { \t 
 
     document.getElementById("ITDiv").style.display = ""; 
 
     document.getElementById("SalesDiv").style.display = "none"; 
 
     document.getElementById("FinanceDiv").style.display = "none"; 
 
     var subsection = document.getElementById("ITDiv_subcatagory"); 
 
     var sub_catagory_input = subsection.value; 
 
     var input_Subcatagory = document.getElementById("subcatagoryinput"); 
 
     input_Subcatagory.value=sub_catagory_input; \t 
 
    } \t \t \t \t 
 
} 
 

 
function previous_values() { 
 
    var input_Department = document.getElementById("departmentinput").value; 
 
    var input_Subcatagory = document.getElementById("subcatagoryinput").value; 
 
    alert(input_Department+","+input_Subcatagory); 
 
    //seldprt.value = input_Department; \t 
 
    if(input_Department != null) { 
 
     alert(); 
 
     var seldprt = document.getElementById("seldprt"); 
 
     seldprt.value = input_Department; \t 
 
     var Finance_subsection = document.getElementById("FinanceDiv_subcatagory"); 
 
     var Sales_subsection = document.getElementById("SalesDiv_subcatagory"); 
 
     var ITDiv_subsection = document.getElementById("ITDiv_subcatagory"); 
 
     if (input_Department == "Finance") { 
 
      document.getElementById("FinanceDiv_subcatagory").value = input_Subcatagory; 
 
      //Finance_subsection.value = input_Subcatagory; 
 
      //alert(Finance_subsection+"Finance_subsection"); \t \t 
 
     } 
 
     if (input_Department == "Sales") { 
 
      document.getElementById("SalesDiv_subcatagory").value = input_Subcatagory; \t 
 
      //alert(Sales_subsection.value+"subsection value"); 
 
     } \t 
 
     if(input_Department=="IT") { 
 
      document.getElementById("ITDiv_subcatagory").value = input_Subcatagory; 
 
      //alert(ITDiv_subsection+"subsection value"); 
 
     } 
 
     //alert("if block"+seldprt.value+","+Finance_subsection.value+","+Sales_subsection.value+","+ITDiv_subsection.value); 
 
\t \t \t \t \t \t \t \t \t 
 
    } /* else { 
 
     var seldprt = document.getElementById("seldprt"); 
 
     seldprt.value = input_Department; 
 
     alert("else block"+seldprt.value); 
 
     var Finance_subsection = document.getElementById("FinanceDiv_subcatagory"); 
 
     Finance_subsection.value = input_Department; 
 
     var Sales_subsection = document.getElementById("SalesDiv_subcatagory"); 
 
     Sales_subsection.value = input_Department; \t \t 
 
     var ITDiv_subsection = document.getElementById("ITDiv_subcatagory"); 
 
     ITDiv_subsection.value = input_Department; 
 
     alert("else block"); 
 
\t \t \t 
 
    } */ 
 
} \t
<body onload="preparePage();fields();previous_values();" > 
 
\t <div class="title"><%=getUserName(request)%>'s Emergency Contact</div><hr/> 
 
\t <div class="instructions">Please provide the name and telephone number of a person that we may contact in case of an emergency.</div> 
 
<div class="container" onclick="fields()"> 
 
<div class="departmentdiv"> 
 
    <label>Department:</label> 
 
    <div align="right" class="selectdiv"> 
 
    <select onchange = "fields()" id = "seldprt"> 
 
    <option value = "Finance">Finance</option> 
 
    <option value = "Sales">Sales</option> 
 
    <option value = "IT">IT</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
    
 
    
 
<div id="FinanceDiv" onclick="" class="subcatagorydiv" > 
 
    <label>Section Name:</label> 
 
    <div align="right" class="selectdiv"> 
 
    <select id = "FinanceDiv_subcatagory"> 
 
    <option value = "Reimbursment">Reimbursment</option> 
 
    <option value = "Billing">Billing</option> 
 
    <option value = "Salaries">Salaries</option> 
 
    </select> 
 
    </div> 
 
    
 
</div> 
 
<div id="SalesDiv" onclick="previous_values()" class="subcatagorydiv" style="display:none;"> 
 
    <label>Section Name:</label> 
 
    <div align="right" class="selectdiv"> 
 
    <select id = "SalesDiv_subcatagory"> 
 
    <option value = "Total Sales">Total Sales</option> 
 
    <option value = "Purchases">Purchases</option> 
 
    <option value = "BestProduct">BestProduct</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div id="ITDiv" onclick="previous_values()" class="subcatagorydiv" style="display:none;" > 
 
    <label>Section Name:</label> 
 
    <div align="right" class="selectdiv"> 
 
    <select id = "ITDiv_subcatagory"> 
 
    <option value = "Internee">Internee</option> 
 
    <option value = "Associates">Associates</option> 
 
    <option value = "Managers">Managers</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
</div> 
 

 

 
\t \t <form action="" method="post" > 
 
\t \t \t <div class="entry" onclick="previous_values()">Name</div> 
 
\t \t \t <input type="text" name="name" id="departmentinput"> 
 
\t \t \t <div class="entry" onchange="previous_values()">Telephone Number</div> 
 
\t \t \t <input type="text" name="telephone" id="subcatagoryinput"> 
 
\t \t \t <div id="readwrite_buttons" class="hide"> 
 
\t \t \t \t <button id="ok" onclick="document.forms[0].submit();return false;">OK</button> 
 
\t \t \t \t <button id="cancel" onclick="javascript:window.close();return false;">Cancel</button> 
 
\t \t \t </div> 
 
\t \t \t <div id="readonly_buttons" class="hide"> 
 
\t \t \t \t <button id="back" onclick="javascript:window.close();return false;">Back</button> 
 
\t \t \t </div> 
 
\t \t </form> 
 
\t </body>

來源

2015-11-19 21:46:03

+0

謝謝傑夫輸入 –

相關問題

 相關問題