根据下拉列表显示隐藏组

时间:2015-10-19 16:14:02

标签: javascript

我有以下带有Javascript的Html FORM。我想根据用户选择的内容显示某些字段。例如。如果用户从下拉列表中选择“组1”,我希望仅显示包含其字段的第一个组。类似于选择2和3.

似乎所有东西都显示正确关联的组及其字段,但是当SAVE它没有保存所有字段时。我没有得到任何错误或任何错误。完成所有字段后,仅保存组1和最后一组。其他一切都被忽略了。

删除Javascript代码工作正常。所以它与我如何保存数据无关。

有人可以看一下吗?谢谢!

<script type="text/javascript">
    jQuery(function ($) {
        $('#Attending').on('change', function () {
            if (this.value == '1') {
                $("#grp1").show();
            }
            else {
                $("#grp1").hide();
            }

            if (this.value == '2') {
                $("#grp2").show();
            }
            else {
                $("#grp2").hide();
            }

            if (this.value == '3') {
                $("#grp3").show();
            }
            else {
                $("#grp3").hide();
            }

        });
    });
</script>

<body>
<select id='Attending'>
<option value="">Select One</option>
<option value="1">Group 1</option>
<option value="2">Group 2</option>
<option value="3">Group 3</option>
</select>
<div style='display:none;' id='grp1'>First Group<br/>&nbsp;
    <br/>&nbsp;
    <input type='text' class='text' name='FirtName1' value size='20' />
    <input type='text' class='text' name='LastName1' value size='20' />
    <br/>
</div>
    <div style='display:none;' id='grp2'>Second Group<br/>&nbsp; 
    <br/>&nbsp;
    <input type='text' class='text' name='FirtName1' value size='20' />
    <input type='text' class='text' name='LastName1' value size='20' />
    <br/>

    <input type='text' class='text' name='FirtName2' value size='20' /> 
    <input type='text' class='text' name='LastName2' value size='20' />
    <br/>
</div>        
    <div style='display:none;' id='grp3'>Third Group<br/>&nbsp; 
    <br/>&nbsp;
    <input type='text' class='text' name='FirtName1' value size='20' />
    <input type='text' class='text' name='LastName1' value size='20' /> 

    <input type='text' class='text' name='FirtName2' value size='20' /> 
    <input type='text' class='text' name='LastName2' value size='20' /> 

    <input type='text' class='text' name='FirtName3' value size='20' /> 
    <input type='text' class='text' name='LastName3' value size='20' />
    <br/>
    <br/>
</div>
</body>

-----更新----
控制器代码

public ActionResult Create([Bind(Include = "id, Attending,FirtName1,LastName1,FirtName2,LastName2,FamilyFName3,FirtName3,LastName3")] Family  Family_Reg)
        {
            if (ModelState.IsValid)
            {
                db.Test.Add(Family_Reg);
                db.SaveChanges(); 
                return RedirectToAction("Home");
            }

            return View(Family_Reg);
        }

0 个答案:

没有答案