Question

使用jQuery / jQueryUI我想使用下面的HTML / JS节目填充表单。

url“editController / loadContents”将返回一些数据，而且.html将（我相信）根据数据填充表单，但数据应该具有什么结构？

我可以在jQueryUI doco中找到的唯一示例是单元素表单。

我猜是有些JSON看起来像这样......

{
     "starttime": "10:00",
     "endtime": "11:00",
 }

...将填充输入字段。但是如何提供SELECT的OPTIONS并将其中一个OPTION指定为'selected'？

<div id="dialog" title="Basic dialog">
  <!-- loaded from ajax call -->
  <form id="exampleForm">
    <fieldset>
    <label for="activity">Activity</label>
    <br />
    <select name="activity" id="activity" class="ui-widget-content ui-corner-all">
    </select>
    <br />
    <label for="subactivity">Sub-Activity</label>
    <br />
    <select name="subactivity" id="subactivity" class="ui-widget-content ui-corner-all">
    </select>
    <br />
    <label for="activity">Reason</label>
    <br />
    <select name="reason" id="reason" class="ui-widget-content ui-corner-all">
    </select>
    <br />
    <label for="starttime">Start</label>
    <br />
    <input type="text" name="starttime" id="starttime" class="text ui-widget-content ui-corner-all" />
    <br />
    <label for="endtime">End</label>
    <br />
    <input type="text" name="endtime" id="endtime" class="text ui-widget-content ui-corner-all" />
    <br />
    </fieldset>
    <input type="button" onclick="Save()" />
  </form>


</div>

<script>
  $(function() {
      $('.myPop').click(function() {
          $.get("editController/loadContents", function(data){
             $("#dialog").html(data);
           });           
          $("#dialog").dialog('open');
      });
  });


function Save(){
 $.post("/editController/Edit", $("#exampleForm").serialize(),
  function(data){
     $("#dialog").dialog('close');
    //update grid with ajax call
  });
}

</script>

BTW我已经在How to use a jQuery UI Modal Form from ASP.Net MVC list page

的非常有用的答案中修改了这段代码

Answer 1

.html将（我相信）填充形式基于数据但是什么结构应该有数据吗？。

.html()只是将jQuery选择器中匹配元素的HTML内容设置为您提供的内容。没有基于JSON对象自动设置现有输入的值。

这为您提供了两个选项：

让您的服务器端代码返回一个填充的HTML表单，您盲目地使用.html()，或
编写JavaScript以将您从服务器返回的原始数据与您网页上存在的input相关联。

但是如何选择OPTIONS 提供的SELECT和其中一个 OPTION指定为“已选择”？

要将选项动态插入现有的select元素，您只需生成一个新的option元素并.append()：

$("<option>")
    .text("Swimming")
    .attr("selected", true) // Set the option's "selected" attribute
    .attr("value", 1)
    .appendTo("#activity");

显然，您必须将该代码调整为从服务器端代码返回的JSON数据，可能会循环访问您返回的一系列活动，并为每个活动创建一个新的option。 / p>

.get返回的数据格式允许.html填充表单？

1 个答案: