如何通过用户输入在屏幕上显示多个选择？

Question

I have the multiple drop down menu working, but when the user tries to select multiple options only 1 appears on the screen. Also, I want the selections to show up next to the drop down, but it currently shows up under. Here's the code. Thank you!

<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

The problem is the showfield function is only ever going to receive 1 value, and you are clearing out all the previous fields. So if you think about it, it needs to not rely on passing in the clicked-on name, but looping through all the elements in the select and seeing which ones are selected.

Answer 2

The divs variable is just a very slight improvement, but the main reason is that you are removing the innerHTML of each element that isn't selected, and you're doing this each time something new is selected. Therefore, with your old code, only one div at a time can display your custom 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