Question

我有一个下拉列表框和两个id值为user，datePicker1，datePicker2的文本字段。我有这个代码，适用于user：

$("#user").change(function() {
   $.ajax({
      url: "${createLink(controller :"tasks", action : "test23")}",
      data: "userName=" + e1.find('option:selected').text(),
      cache: false,
      success: function(html) {
         $(".errors").append(html);
      }
   });
});

也就是说，在用户从下拉列表中选择之后，我发送ajax调用并将接收到的数据附加到div errors的类。

但实际上我想要的是，在从user div中选择用户后，我需要通过保留datePicker1来查找datePicker2，user个事件div事件一样。现在 datePicker1，datePicker2个事件可用后，我需要发送一个ajax调用。

我的HTML代码：

user div元素：

<select name="user.id" id="user" required="" class="many-to-one" >
<option value="">-Choose any User from the list</option>
<option value="1" >admin</option>
<option value="2" >anto</option>
</select>

datePicker1 div元素：

<input type="text" name="startDate" value="" id="datePicker1" />

datePicker2 div元素：

<input type="text" name="endDate" value="" id="datePicker2" />

编辑：

在用户选择了所有三个下拉框的值之后，我可以进行ajax调用。这意味着我需要从下拉列表中获取三个值，同时更改为一个字段应该调用ajax方法，前提是已经选择了另外两个字段。希望我对此很清楚。

我怎么能这样做？

任何人都可以帮助我解决这个问题，我是jquery的新手，我一直坚持下去。

提前致谢。

Answer 1

假设3个字段的默认值是空字符串，您可以这样做：

$("#user,#datePicker1,#datePicker2").change(function() {
  if ($("#user").val() != "" && $("#datePicker1").val() != "" && $("#datePicker2").val() != "") {
     //make your ajax call

   } 


});

如果任何字段发生变化，这将被触发，但如果设置了所有3个值，则只会将值提交给服务器。

检查这个jsfiddle，它应该可以工作：

http://jsfiddle.net/nFKT6/1/

Answer 2

这个怎么样：

var myHandler = function() {
  // Don't do anything if value is missing:
  if(!$("#user").attr("selectedIndex") 
         || !$("#datePicker1").attr("selectedIndex") 
         || !$("#datePicker1").attr("selectedIndex")) return;

   $.ajax({
      url: "${createLink(controller :"tasks", action : "test23")}",
      data: "userName=" + $("#user").find('option:selected').text() + "&date1=" 
         + $("#datePicker1").find('option:selected').text() + "&date2=" 
         + $("#datePicker2").find('option:selected').text(),
      cache: false,
      success: function(html) {
         $(".errors").append(html);
      }
   });
}
$("#user,#datePicker1,#datePicker2").change(myHandler);

如何对jquery事件设置一些约束？

编辑：

2 个答案: