Question

我正在尝试使用Jquery重新构建表单的目标网址 - 请参阅下文。我出错的任何想法？非常感谢...

<!DOCTYPE html>
<html>
<head>
  <style>
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <script>
      // Needs to point at search page with eg: test.htm?s=SearchTerm&cat=3,7
      // but I keep getting - test.htm?s=hh&cat1=3&cat2=0
      $("#aSearch").click(function () { 
        $('form').attr('action', './test.htm?s=' + this.s + '&cat=' . this.cat1 + ',' + this.cat2);
      });
  </script>

  <form name="advancedSearch" action="" method="get">
    <input id="s" type="text" name="s" size="40" />
    <select name="cat1">
      <option value="0"> - - - </option>
      <option value="3">Chardonnay (6)</option>
      <option value="23">Gewurztraminer (1)</option>
      <option value="24">Pinot Gris (1)</option>
      <option value="4">Sauvignon Blanc (3)</option>              
    </select>
    <select name="cat2">
      <option value="0"> - - - </option>
      <option value="2">Burgandy (6)</option>
      <option value="7">Shiraz (1)</option>           
    </select>
    <div><input id="aSearch" type="submit" value="Search" /></div
  </form>

</body>
</html>

Answer 1

在原始代码中，您尝试访问this的属性。回调中的this关键字引用了aSearch DOM对象，因此它没有提供正确的值。

$('form').attr('action', './test.htm?s=' + this.s + '&cat=' . this.cat1 + ',' + this.cat2);

您需要使用jQuery选择每个元素，并使用.val()获取其值：

<script>
    $(document).ready(function() {
        var s = $('#s');
        var cat1 = $('#cat1');
        var cat2 = $('#cat2');

        $("#aSearch").click(function () { 
            $('form').attr('action', './test.htm?s=' + s.val() + '&cat=' . cat1.val() + ',' + cat2.val());
        });
    });
</script>

简单的javascript表单动作方向

1 个答案: