2

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

  1. 我希望这完全在浏览器中处理，而不是 AJAX 调用来获取下拉选择的动态“子表单”部分。
  2. 我不想添加第 3 方 JS 库，而是想利用 ASP.NET MVC4 附带的库（jquery、knout 等）。但是，如果前一种尝试太笨拙，我愿意添加一个 3rd 方库。

你推荐什么路径？HTML5 对此有什么“帮助”吗？

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

4

2 回答 2

4

纯 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/

于 2012-11-17T00:55:16.383 回答
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在每个输入上设置了一个绑定，检查 的 Name 属性selectedItem()以确定应该显示哪个项目。

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

您可以在此处阅读有关其工作原理的信息

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

于 2012-11-17T05:28:41.750 回答