Question

我想要一个包含一些固定输入的HTML表单，以及一些基于下拉列表选择的动态表单。我的目标：

我希望这完全在浏览器中处理，而不是通过AJAX调用来获取下拉列表中选择的动态“子窗体”部分。
我不想添加第三方JS库，而是利用ASP.NET MVC4附带的库（jquery，knockout等）。但是，如果前一次尝试太笨拙，我愿意添加第三方库。

您推荐什么样的路径？ HTML5对此有任何“帮助”吗？

更新在我看来，表单的HttpPost不应包含未在选择框中选择的“子表单”值。现在怎么办？将额外的div元素存储在文档外列表中并根据需要交换它们？ 或者可能更好，在发布按钮之前附加一个事件，删除未使用/不可见的div？

Answer 1

纯粹的javascript完全有能力做到这一点。如果你走这条路，jQuery会让你的生活更轻松。

以下是如何使用jQuery基于下拉值显示不同表单选项的示例：

<form>
    <div>Are you in school?
        <select id="in_school">
            <option selected="selected">Please choose</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    <div id="in_school_yes" class="in_school_input" style="display: none;">
        What grade are you in?
        <input type="text" name="grade" />
    </div>
    <div id="in_school_no" class="in_school_input" style="display: none;">
        What year did you graduate?
        <input type="text" name="graduation_year" />
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

<script>
$("#in_school").change(function() {
    var in_school = $(this).val();
    $(".in_school_input").hide("fast", function() {
        $("#in_school_" + in_school).show("slow");
    });
});
</script>

小提琴：http://jsfiddle.net/RDtVZ/

Answer 2

当您想要创建需要动态更改客户端的复杂UI时，Knockout可以真正发挥作用。这是一个如何在Knockout中做出要求的简单示例。

HTML：

 <form>
     <select name="inputSelect" data-bind="options: dataSet, optionsText: 'Name', value: selectedItem,  optionsCaption: '-- Select --'"></select>

     <input type="text" name="firstName" data-bind="value: firstName, visible: selectedItem() && selectedItem().Name == 'First Name'" /> 
     <input type="text" name="lastName" data-bind="value: lastName, visible: selectedItem() && selectedItem().Name == 'Last Name'" /> 
     <input type="text" name="age" data-bind="value: age, visible: selectedItem() && selectedItem().Name == 'Age'" /> 
</form>

JS模型：

function Model() {
   var self = this;
   self.firstName = ko.observable('Matthew');
   self.lastName = ko.observable('Cox');
   self.age = ko.observable(26);

   self.selectedItem = ko.observable();

   self.dataSet = ko.observableArray([{ Id: 0, Name:'First Name'}, { Id: 1, Name:'Last Name'}, { Id: 2, Name:'Age'}]);
}

var vm = new Model();
ko.applyBindings(vm);

的jsfiddle： http://jsfiddle.net/JmpGD/1/

说明：

我在每个输入上放置visible绑定，检查selectedItem()的Name属性以确定应显示哪个项目。

在jsfiddle中，我使用稍微不同的方法来处理selectedItem()为null，这会导致visible绑定在尝试评估selectedItem().Name == 'something'时爆炸。

您可以在这里阅读有关如何运作的信息

http://knockoutjs.com/documentation/with-binding.html

动态HTML表单

2 个答案: