複数の選択を画面に表示させるにはどうすればよいですか？

Question

複数のドロップダウンメニューがありますが、複数のオプションを選択しようとすると、画面に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> 

Answer 1

変数はわずかに改善されていますが、主な理由は、選択されていない各要素のinnerHTMLを削除していることです。したがって、古いコードでは、一度に1つの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 

Answer 2

問題は、showfield関数がこれまでに1つの値しか受け取ろうとしていないことと、すべての前のフィールドをクリアしていることです。だから、あなたがそれについて考えるなら、それはクリックされた名前を渡すことに頼るのではなく、選択のすべての要素をループし、選択された要素を見ることを必要とします。