我如何使多个选择显示在屏幕上与他们的用户输入
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>
divs
变量只是一个非常小的改进,但主要原因是您要删除每个未选中元素的innerHTML
,并且每次选择新元素时都要这样做。因此,在旧代码中,每次只能显示一个div。
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
问题是showfield函数只接收1个值,而您正在清除之前的所有字段。因此,如果你仔细想想,它不需要依赖于传入已点击的名称,而是需要循环遍历select中的所有元素并查看哪些元素被选中。
相关文章:
- ckeditor,并在用户键入时显示他们的数据
- 希望在注册后将用户定向到他们的帐户
- 允许手机用户在不使用应用程序的情况下将文件从我的网站保存到他们的手机存储中
- 如何允许用户共享他们的<型号名称>彼此之间
- 如何防止用户在jquery点击功能不是他们的'转向'
- Meteor:能够登录用户从他们的搜索结果中删除文档
- 用户使用javascript生成的输入字段,如果验证失败,我如何将他们的数据填充回输入字段
- & # 39; onclick # 39;将用户重定向到他们的主页
- 如何添加图像到mysql数据库,当用户提交他们的图像
- 如果我允许用户为他们的“配置文件”编写HTML,我应该禁止/删除哪些元素以保证其他用户的安全
- 如何控制当用户将他们的电子邮件放入文本字段并单击提交时发生的事情
- 我怎么知道用户正在从他们的Chrome下载文件?
- 我如何使多个选择显示在屏幕上与他们的用户输入
- 在什么情况下我才能判断用户是否选择不分享他们的位置
- 当用户接受共享他们的位置时是否有回调
- 如何创建一个弹出,让用户键入他们的名字与javascript
- 我如何识别我的API的用户,当他们在JS中调用它
- 如何登录作为一个用户不知道他们的密码
- 如何保护我的javascript客户端,其中用户将填写他们的密码
- 工作的谷歌地图API,我有它的设置,以便用户可以添加一个选择矩形到他们的屏幕.我怎么能只做一次呢