关于选择数字个数去对应显示选项个数

前一段时间在做毕业设计时，用到了调查问卷的功能，在一开始时为了省事，自己把调查问卷的功能固定在了网页上，也就是常说的写死了，后来在进行改进的时候，进一步的修改了调查问卷的添加功能，可以选择对应的选项个数，在下方显示出选项。
具体的设计就是，将选项个数做成一个下拉框，通过选择下拉框中的数字来显示对应的选项个数，下拉框的代码如下：

<span>选项个数：</span> <select name =“selection1” onchange =“show_text(this.options[this.options.selectedIndex].value)”>
                    <option value =“1”> 1个</ option>
                    <option value =“2”> 2个</ option>
                    <option value =“3”> 3个</ option>
                    <option value =“4”> 4个</ option>
                    <option value =“5”> 5个</ option>
                    <option value =“6”> 6个</ option>
                    <option value =“7”> 7个</ option>
                    <option value =“8”> 8个</ option>
                </select>

其中的 onchange 是当下拉框中的内容改变时，触发 onchang 事件，去调用在 <script></script> 中事先编写好的show_text()去改变下方的内容，函数show_text(this.options[this.options.selectedIndex].value) 中的this.options[this.options.selectedIndex].value 是获取当前选中的option的value值。show_text()代码如下：

 function show_text(z) {
                    var oDiv = document.getElementById('id2');
                    var oDiv3 = document.getElementById('id3');
                    var oDiv4 = document.getElementById('id4');
                    var oDiv5 = document.getElementById('id5');
                    var oDiv6 = document.getElementById('id6');
                    var oDiv7 = document.getElementById('id7');
                    var oDiv8 = document.getElementById('id8');
                    var oDiv9 = document.getElementById('id9');
                if (z == 1) {

                    oDiv.innerHTML = '<span>选项A :</span><input id="选项" type="text" name="text1" />';
                } else if (z == 2) {

                    oDiv.innerHTML = '<span>选项A :</span><input id="选项" type="text" name="text1" />';
                    oDiv3.innerHTML = '<span>选项B :</span><input id="选项" type="text" name="text2" />';
                } else if (z == 3) {

                    oDiv.innerHTML = '<span>选项A :</span><input id="选项" type="text" name="text1" />';
                    oDiv3.innerHTML = '<span>选项B :</span><input id="选项" type="text" name="text2" />';
                    oDiv4.innerHTML = '<span>选项C :</span><input id="选项" type="text" name="text3" />';
                }else if (z==4){

                    oDiv.innerHTML = '<span>选项A :</span><input id="选项" type="text" name="text1" />';
                    oDiv3.innerHTML = '<span>选项B :</span><input id="选项" type="text" name="text2" />';
                    oDiv4.innerHTML = '<span>选项C :</span><input id="选项" type="text" name="text3" />';
                    oDiv5.innerHTML = '<span>选项D :</span><input id="选项" type="text" name="text4" />';
                }else if(z==5){

                    oDiv.innerHTML = '<span>选项A :</span><input id="选项" type="text" name="text1" />';
                    oDiv3.innerHTML = '<span>选项B :</span><input id="选项" type="text" name="text2" />';
                    oDiv4.innerHTML = '<span>选项C :</span><input id="选项" type="text" name="text3" />';
                    oDiv5.innerHTML = '<span>选项D :</span><input id="选项" type="text" name="text4" />';
                    oDiv6.innerHTML = '<span>选项E :</span><input id="选项" type="text" name="text5" />';
                }else if(z==6){

                    oDiv.innerHTML = '<span>选项A :</span><input id="选项" type="text" name="text1" />';
                    oDiv3.innerHTML = '<span>选项B :</span><input id="选项" type="text" name="text2" />';
                    oDiv4.innerHTML = '<span>选项C :</span><input id="选项" type="text" name="text3" />';
                    oDiv5.innerHTML = '<span>选项D :</span><input id="选项" type="text" name="text4" />';
                    oDiv6.innerHTML = '<span>选项E :</span><input id="选项" type="text" name="text5" />';
                    oDiv7.innerHTML = '<span>选项F :</span><input id="选项" type="text" name="text6" />';
                }else if (z==7){

                    oDiv.innerHTML = '<span>选项A :</span><input id="选项" type="text" name="text1" />';
                    oDiv3.innerHTML = '<span>选项B :</span><input id="选项" type="text" name="text2" />';
                    oDiv4.innerHTML = '<span>选项C :</span><input id="选项" type="text" name="text3" />';
                    oDiv5.innerHTML = '<span>选项D :</span><input id="选项" type="text" name="text4" />';
                    oDiv6.innerHTML = '<span>选项E :</span><input id="选项" type="text" name="text5" />';
                    oDiv7.innerHTML = '<span>选项F :</span><input id="选项" type="text" name="text6" />';
                    oDiv8.innerHTML = '<span>选项G :</span><input id="选项" type="text" name="text7" />';
                }else{

                    oDiv.innerHTML = '<span>选项A :</span><input id="选项" type="text" name="text1" />';
                    oDiv3.innerHTML = '<span>选项B :</span><input id="选项" type="text" name="text2" />';
                    oDiv4.innerHTML = '<span>选项C :</span><input id="选项" type="text" name="text3" />';
                    oDiv5.innerHTML = '<span>选项D :</span><input id="选项" type="text" name="text4" />';
                    oDiv6.innerHTML = '<span>选项E :</span><input id="选项" type="text" name="text5" />';
                    oDiv7.innerHTML = '<span>选项F :</span><input id="选项" type="text" name="text6" />';
                    oDiv8.innerHTML = '<span>选项G :</span><input id="选项" type="text" name="text7" />';
                    oDiv9.innerHTML = '<span>选项H :</span><input id="选项" type="text" name="text8" />';
                }
            }

在上面的函数中，是将要显示在html的内容写在了<script>...</script>中，选择相应的选项，相应的选项个数会显示在html界面上，document.getElementById('id2')是获取下方的div的id，通过这，将要显示的内容定位在不同的div中，div的代码如下：

 <label id="id2">

            </label>
            <label id="id3">

            </label>
            <label id="id4">

            </label>
            <label id="id5">

            </label>
            <label id="id6">

            </label>
            <label id="id7">

            </label>
            <label id="id8">

            </label>
            <label id="id9">

            </label>

通过这些，就可以动态的显示网页，当然这只是最笨的方法，并且本程序还有一个毛病，那就是在选择完一次选项之后，如果再次选择，界面不会再次改变，应该设置一个类似于回退的功能。
界面如下：

献丑了！