[英]How do I make form (two inputs) take me to another page which selections depends on the input
[英]How do I make multiple selections show up on the screen with their user input?
我有多個下拉菜單,但是當用戶嘗試選擇多個選項時,屏幕上僅顯示1。 另外,我希望所選內容顯示在下拉菜單旁邊,但當前顯示在下方。 這是代碼。 謝謝!
<script type="text/javascript">
function showfield(name){
//------------------------------------------------------------
//If chosen show user input
//------------------------------------------------------------
if(name=='GT')document.getElementById('div1').innerHTML='Greater Than: <input type="text" name="GreaterThan" />';
if(name=='GE')document.getElementById('div2').innerHTML='Greater Equal to: <input type="text" name="GreaterEqualTo" />';
if(name=='LT')document.getElementById('div3').innerHTML='Less Than: <input type="text" name="LessThan" />';
if(name=='LE')document.getElementById('div4').innerHTML='Less Than Equal to: <input type="text" name="LessThanEqualTo" />';
if(name=='EQ')document.getElementById('div5').innerHTML='Equal to: <input type="text" name="EqualTo" />';
if(name=='B1')document.getElementById('div6').innerHTML='Between 1: <input type="text" name="Between1" />';
if(name=='B2')document.getElementById('div7').innerHTML='Between 2: <input type="text" name="Between2" />';
if(name=='NE')document.getElementById('div8').innerHTML='Not Equal to: <input type="text" name="NotEqualTo" />';
//------------------------------------------------------------
//If not selected dont show user input
//------------------------------------------------------------
if(name!='GT')document.getElementById('div1').innerHTML='';
if(name!='GE')document.getElementById('div2').innerHTML='';
if(name!='LT')document.getElementById('div3').innerHTML='';
if(name!='LE')document.getElementById('div4').innerHTML='';
if(name!='EQ')document.getElementById('div5').innerHTML='';
if(name!='B1')document.getElementById('div6').innerHTML='';
if(name!='B2')document.getElementById('div7').innerHTML='';
if(name!='NE')document.getElementById('div8').innerHTML='';
}
</script>
<select name="ChosenQualifiers[]" onchange="showfield(this.options[this.selectedIndex].value)" id="qual" multiple >
<option selected='selected'> Choose a Qualifier </option>
<option value='GT'> Greater Than </option>
<option value='GE'> Greater Equal to </option>
<option value='LT'> Less Than </option>
<option value='LE'> Less Than Equal to </option>
<option value='EQ'> Equal to </option>
<option value='B1'> B1 </option>
<option value='B2'> B2 </option>
<option value='NE'> Not Equal to </option>
</select>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
問題在於showfield函數只會接收1個值,而您正在清除所有以前的字段。 因此,如果您考慮一下,它不必依賴於傳遞單擊的名稱,而是循環遍歷select中的所有元素並查看選擇了哪些元素。
divs
變量只是一個很小的改進,但是主要原因是您要刪除未選擇的每個元素的innerHTML
,並且每次選擇新內容時都要這樣做。 因此,使用您的舊代碼,一次只能顯示一個div來顯示您的自定義html。
var divs = ['div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7', 'div8'].reduce(function(prev, curr) {
var obj = {}; //build an object that contains the ids as keys and dom elements as values so
obj[curr] = document.getElementById(curr); //we don't have to keep searching the dom each time
prev.push(obj);
}, {});
function showfield(name){
//------------------------------------------------------------
//If chosen show user input
//------------------------------------------------------------
if(name=='GT') divs['div1'].innerHTML='Greater Than: <input type="text" name="GreaterThan" />';
else if(name=='GE') divs['div2'].innerHTML='Greater Equal to: <input type="text" name="GreaterEqualTo" />';
else if(name=='LT') divs['div3'].innerHTML='Less Than: <input type="text" name="LessThan" />';
else if(name=='LE') divs['div4'].innerHTML='Less Than Equal to: <input type="text" name="LessThanEqualTo" />';
else if(name=='EQ') divs['div5'].innerHTML='Equal to: <input type="text" name="EqualTo" />';
else if(name=='B1') divs['div6'].innerHTML='Between 1: <input type="text" name="Between1" />';
else if(name=='B2') divs['div7'].innerHTML='Between 2: <input type="text" name="Between2" />';
else if(name=='NE') divs['div8'].innerHTML='Not Equal to: <input type="text" name="NotEqualTo" />';
}
//if you want to be able to show more than one at a time you don't need to worry about
//removing things here
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.