動態添加 <select> javascript的盒子
[英]dynamically add <select> boxes with javascript
問題描述
我有一個表單，用戶可以選擇一個文件，然后應該能夠選擇他們要上傳的報告有多少個參數
我想要一個具有數字0 -5的下拉菜單，並且當用戶選擇一個數字時，會顯示許多帶有參數類型的框，例如帶有“日期”，“名稱”，“部件號”等的下拉菜單。在選擇菜單中，為用戶選擇的每個號碼
我仔細研究了SO上的其他解決方案，它們很有意義，但是我似乎無法使它們正常工作，
到目前為止，這里是我僅測試一個框是否會出現的內容：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<body>
<ui:composition template="./templates/template.xhtml">
<ui:define name="content">
<c:choose>
<c:when test="#{controls.designAuth}">
Welcome Report Designer!<br /><br />
<div id="fileUpload">
<form name="myForm" action="../UploadServlet" enctype="multipart/form-data" onsubmit="return validate_form(this);" method="POST">
<b>Make sure your filename is meaningful (eg. WasteByMachineReport.jrxml)</b><br /><br />
Please specify a file:<input type="file" name="file" size="40"/><br />
Number of parameters: <select name='numSelect' onchange="draw_param_dropdowns();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br />
<select class="parametersHide" id="select1"><option></option></select>
<script type="text/javascript" language="Javascript">
function draw_param_dropdowns(){
var sel = document.getElementById("select1");
sel.style = "visibility:visible";
}
</script>
<input type="submit" value="Upload"/>
</form>
</div>
</c:when>
<c:otherwise>
Not Authorized
</c:otherwise>
</c:choose>
</ui:define>
</ui:composition>
</body>
</html>
“查看源代碼”結果：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<link href="./../resources/dtree/dtree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./../resources/dtree/dtree.js"></script>
<title>Reports</title></head><body>
<div id="top" class="top">
<h1>Wingfoot Reports v0.3
<div style="float:right;margin-right: 20px;">
<form id="j_idt8" name="j_idt8" method="post" action="/WebApplication8/faces/designer.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt8" value="j_idt8" />
<span style=" font-size: 20px; font-weight: normal;">SCOTT </span><input type="submit" name="j_idt8:j_idt10" value="Logout" style=" font-size: 20px;" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-4683216470766096399:-9055922898460672452" autocomplete="off" />
</form>
</div>
</h1>
</div>
<div>
<div id="left">
<form id="j_idt14" name="j_idt14" method="post" action="/WebApplication8/faces/designer.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt14" value="j_idt14" />
<center>
<script type="text/javascript" src="/WebApplication8/faces/javax.faces.resource/jsf.js?ln=javax.faces&stage=Development"></script>
<a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt14'),{'j_idt14:j_idt16':'j_idt14:j_idt16'},'');return false">Design</a> | <a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt14'),{'j_idt14:j_idt18':'j_idt14:j_idt18'},'');return false">Admin</a> | <a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt14'),{'j_idt14:j_idt20':'j_idt14:j_idt20'},'');return false">Queries</a><br />
<hr />
</center><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-4683216470766096399:-9055922898460672452" autocomplete="off" />
</form>
</div>
<div id="content" class="left_content">
Welcome Report Designer!<br /><br />
<div id="fileUpload">
<form name="myForm" action="../UploadServlet" enctype="multipart/form-data" onsubmit="return validate_form(this);" method="POST">
<b>Make sure your filename is meaningful (eg. WasteByMachineReport.jrxml)</b><br /><br />
Please specify a file:<input type="file" name="file" size="40" /><br />
Number of parameters: <select name="numSelect" onchange="draw_param_dropdowns();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br />
<select class="parametersHide" id="select1"><option></option></select>
<script type="text/javascript" language="Javascript">
function draw_param_dropdowns(){
var sel = document.getElementById("select1");
sel.style = "visibility:visible";
}
</script>
<input type="submit" value="Upload" />
</form>
</div>
</div>
</div>
</body>
</html>
1 個解決方案
解決方案1
1 已采納 2011-03-17 15:52:35
您可以嘗試通過對樣式標簽進行修改的方式來循環執行此操作，因為看起來您希望用戶輸入某些東西，因此我將使用輸入標簽。
例如，您有：
<select name="numSelect" id = "numSelect" onchange="draw_param_dropdowns();">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- Create all the boxes for input and hide them initially -->
<select name="select1" id="select1" style="display:none;"><option></option></select>
<select name="select2" id="select2" style="display:none;"><option></option></select>
...
對於您的JavaScript：
<script type="text/javascript" >
//Loop through the drop down boxes and hide them all.
//This will ensure that you don't have 'leftover' boxes after selecting
function draw_param_dropdowns() {
for (var x = 1; x <= 4; x++) {
document.getElementById('select' + x).style.display='none';
}
for (var y = 1; y <= document.getElementById("numSelect").selectedIndex; y++) {
document.getElementById('select' + y).style.display = 'block';
}
}
</script>
它可能比SO的其他一些編碼器可以做的要長一些，但是希望這會導致更多的理解。
如何根據Javascript中另一個動態創建的選擇列表動態創建復選框列表
[英]How to create a list of check boxes dynamically depending on another dynamically created select list in Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.