多种动态选择 [英] Multiple dynamic selections

问题描述

我需要一种有多种选择的方式，但一次只能看到一种。
当用户想要添加另一个选择时，他/她点击一个按钮，复选框，收音机。任何
他们需要能够添加无限数量的选择。有任何想法吗？

解决方案

老问题，但可能会增加我的2美分，以防其他人想知道答案。 >

我会使用JavaScript在JavaScript循环的更多部分中创建< select> 元素。例如，您的第一页会有

 < input type =buttonvalue =新选择框onclick = createNewBox（）; />< br /> 
< span id =selectElement1> 
< select> [您选择框的代码放在此处]< / select> 
< span id =selectElement2>< / span> 
< / span> 
  

可以设置基本的select元素， New Select Box 会激活这个JavaScript函数代码：



 < script type =text / javascript> 
 //初始化代码
 var currentSelect = 1; //保持跟踪哪个选择框是当前的
 
 //新的选择框代码
函数createNewBox（）
 {
 var currentSelect = currentSelect + 1; 
 var nextSelect = currentSelect + 1; 
 document.getElementById（'selectElement'+ currentSelect）.innerHTML =< select> [code goes here]< / select>< span id = \selectElement+ nextSelect +\> < /跨度>中; 
} 
< / script> 
  

整个事件只能运行这两个代码片段，并且不需要jQuery代码。 p>


I need a way of having multiple selections but only one visible at a time. When the user wants to add another selection he/she clicks a button,checkbox,radio..whatever They need to be able to add an unlimited number of selections. Any Ideas?

解决方案

Old question, but might as well add my 2 cents, in case anyone else wants to know an answer.

I would use JavaScript to create a <select> element in a "more" section, from a JavaScript loop. For example, your first page would have

<input type="button" value="New Select Box" onclick="createNewBox();" /><br />
<span id="selectElement1">
    <select>[your code for the select box goes here]</select>
    <span id="selectElement2"></span>
</span>

Which could setup your basic select element, and the New Select Box would activate this JavaScript function code:

<script type="text/javascript">
// Initialization Code
var currentSelect = 1; // Keeps track of which select box is current

// New Select Box code
function createNewBox()
{
    var currentSelect = currentSelect + 1;
    var nextSelect = currentSelect + 1;
    document.getElementById('selectElement'+currentSelect).innerHTML = "<select>[code goes here]</select><span id=\"selectElement"+nextSelect+"\"></span>";
}
</script>

This whole thing can run with only those two code snippets, and no jQuery code is needed.

这篇关于多种动态选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！