根据选择显示多个DIVS (内有表单元素)

Question

假设我有一个表单，并有一个选择选项列表。号码是4到10

假设用户选择4(默认)

然后，我将显示4个div (所有表单元素的增量ID-附加的选项-4等等)，每个div中有完全相同的5个表单字段，所有这些都具有基于select选择的匹配元素ID。

如果用户从select选项中选择了6，那么6个div在每个div中以相同的表单字段排列出现，并且每个表单字段id与所选选项匹配。

好的，这就是困惑的问题，…开始吧。

<form>
<select id="choices">
    <option value="">Please choose</option>
    <option value="4">Create 4</option>
    <option value="5">Create 5</option>
    <option value="6">Create 6</option>
</select>

<div id="block-1">
    <input id="choice-1-1" type="text">
    <input id="choice-1-2" type="text">
    <input id="choice-1-3" type="text">
</div>
<div id="block-2">
    <input id="choice-2-1" type="text">
    <input id="choice-2-2" type="text">
    <input id="choice-2-3" type="text">
</div>
<div id="block-3">
    <input id="choice-3-1" type="text">
    <input id="choice-3-2" type="text">
    <input id="choice-3-3" type="text">
</div>
<div id="block-4">
    <input id="choice-4-1" type="text">
    <input id="choice-4-2" type="text">
    <input id="choice-4-3" type="text">
</div>
<div id="block-5">
    <input id="choice-5-1" type="text">
    <input id="choice-5-2" type="text">
    <input id="choice-5-3" type="text">
</div>
<input type="submit" id="submit" name="submit" value="Submit">

</form>

因此，当页面加载时，所有这些div都不会显示。它们在select下拉列表中单击5(这不一定是表单的一部分)，并显示相应的div。

表单元素的模式对于每个块都是完全相同的。所有需要更改的显然是ids。

我不想让任何人为我做这个，但我想要一些帮助，请在最稳健的经济的编码方法，这可以使用jQuery或一个php解决方案(首选)

干杯

Answer 1

向所有块div元素添加一个类block

<form>
    <select id="choices">
        <option value="">Please choose</option>
        <option value="4">Create 4</option>
        <option value="5">Create 5</option>
        <option value="6">Create 6</option>
    </select>
    <div id="block-1" class="block">
        <input id="choice-1-1" type="text">
        <input id="choice-1-2" type="text">
        <input id="choice-1-3" type="text">
    </div>
    <div id="block-2" class="block">
        <input id="choice-2-1" type="text">
        <input id="choice-2-2" type="text">
        <input id="choice-2-3" type="text">
    </div>
    <div id="block-3" class="block">
        <input id="choice-3-1" type="text">
        <input id="choice-3-2" type="text">
        <input id="choice-3-3" type="text">
    </div>
    <div id="block-4" class="block">
        <input id="choice-4-1" type="text">
        <input id="choice-4-2" type="text">
        <input id="choice-4-3" type="text">
    </div>
    <div id="block-5" class="block">
        <input id="choice-5-1" type="text">
        <input id="choice-5-2" type="text">
        <input id="choice-5-3" type="text">
    </div>
    <input type="submit" id="submit" name="submit" value="Submit">
</form>

然后

jQuery(function () {
    var $blocks = $('form .block');
    $('#choices').change(function () {
        $blocks.slice(0, +this.value || 4).show();
        $blocks.slice(+this.value || 4).hide();
    })
}).change()

演示：小提琴

Answer 2

“我不想有人给我做这个.”

试着保持这样的信息，但并不是为了你：

对于顶部的select标记，请查看onChange 这里。

函数调用将类似于onChange="myFunction(this.value);"

基于值(1，2，3等)然后，您可以运行一个循环。就像..。

var string = '';

for(var i = 1; i<=value; i++){

    string = string.concat('<div id="block-'+i+'">');

    for(var j = 1; j <= 3; j++){
        string = string.concat('<input id="choice-'+i+'-'+j+'" type="text">');
    }

    string = string.concat('<div>');
}

然后打印出你需要的地方..。$('.container').html(string);

这是使用JavaScript / JQuery

Answer 3

为此，您必须使用Jquery和css。

1. 在css中使用display:none隐藏所有div
2. 然后在jquery中使用select标记的.change()
3. 检查select的值，并显示相应的div，假设您选择了2，然后显示div，如$('#blockID1').show();$('#blockID2').show();
4. 使用$('#otherblockID3').hide();$('#otherblockID4').hide();.....隐藏其他div