Question

我正在尝试制作一个下拉列表，人们可以在其中显示和隐藏表单中的多个div。我正在尝试制作问卷，让人们可以创造问题。

我研究了这个，但没有找到我正在寻找的结果。我怎么做，使用Javascript，一个可以显示和隐藏多个div的功能？

例如，因为有五个div标签。如果我在选项框中选择数字3，它应该显示三个div并隐藏两个。

表格

Choose amount of questions: <select name="question"><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><option value="9">9</option><option value="10">10</option></select>

        <div name="section1">

        Subject: <input type="text" name="name"> <br>
         Question: <input type="text" rows="1" cols="40" name="video">
        </div>

        <br>
        <div name="section2">

        Subject: <input type="text" name="name"> <br>
        Question: <input type="text" rows="1" cols="40" name="video">

        </div>
        <br>
        <div name="section3">

        Subject: <input type="text" name="name"> <br>
        Question: <input type="text" rows="1" cols="40" name="video">

        </div>
        <br>

        <div name="section4">

        Subject: <input type="text" name="name"> <br>
        Question: <input type="text" rows="1" cols="40" name="video">

        </div>

    <br>
     <div name="section5">

        Subject: <input type="text" name="name"> <br>
        Question: <input type="text" rows="1" cols="40" name="video">
        </div>
        </form>

Answer 1

试试这个：

$().ready(function()
{
  $('div[name^=section]').hide(); // hide all the div elements where name attribute starts with 'section' - NEEDED FOR HIDING ALL DIV'S DURING PAGE LOAD.
  $('select[name=question]').on("change",function() // delegate an onchange method to select element with name attribute = question.
  {
    $('div[name^=section]').hide(); // hide all the div elements where name attribute starts with 'section'
    var count = $(this).val(); // get the no. of questions to show as the value selected from the dropdown.
    for(var i=1; i <= count; i++)    // iterate through each element starts from 1 to count and show it.
       $('div[name^=section' + i + ']').show();
  });
});

工作示例：https://jsfiddle.net/DinoMyte/3hvvdht9/4/

Answer 2

你尝试过使用bootstrap吗？看看崩溃的例子 http://getbootstrap.com/javascript/#collapse

另外一点澄清会有所帮助。

下拉列表显示或隐藏一定数量的div

2 个答案: