Question

我正在尝试使用jQuery来组合用户的选择字段选项（类别+贡献者）并将其插入到id为as_q的隐藏字段中，但是当我运行脚本时，as_q的值始终为空。

目前，我在用户点击提交时调用该函数 - 它获取两个选择字段的值并将它们组合在一起，然后将它们分配给as_q字段 - 至少这是我的逻辑。

也许我错在了错误的地方？我目前的代码如下。非常感谢任何帮助，谢谢

<form action="<? echo $PHP_SELF;?>" method="get" id="cse-search-box">
  <input type="text" name="q" size="31"/>
  <select name="category">
    <option>Movies</option>
    <option>Film</option>
    <option>Fashion</option>
  </select>
  <select name="contributors">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
  <input type="hidden" name="as_q" id="as_q" value="" />
  <input type="submit" name="sa" value="Search" id="submit_query" />
</form>

<script>      
  $('#submit_query').click(function (){
    var category = $('[name=category]').val();
    var contributors = $('[name=contributors]').val();

    $('[#as_q]').val(category+' '+contributors);

  }); 
</script>

Answer 1

只是一个猜测 - 摆脱......的方括号。

$('[#as_q]').val(category+' '+contributors);

Answer 2

除了提出的其他建议：

1 - 将您的代码放入$(document).ready(...块。这可能是它无法正常工作的原因。

2 - 为了获得更好的效果而选择ID，attribute filters（如[name = blah]）不是选择元素的最快方式。

$(document).ready(function() {
    $('#submit_query').click(function (){
        var category = $('#category').val();
        var contributors = $('#contributors').val();
        $('#as_q').val(category + ' ' + contributors);
    });  
});

Answer 3

这是我正在使用的测试代码，这会导致您的代码正常工作。

该文件名为sandbox.php（我提到这是唯一真正未知的是，如果你给你的文件扩展名为.php）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
  <meta http-equiv="Content-Type" content="application/text+html;utf-8">

  <title>Sandbox</title>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet">
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
  $('#submit_query').click(function (){
    var category = $('[name=category]').val();
    var contributors = $('[name=contributors]').val();

    $('#as_q').val(category+' '+contributors);
  }); 
    });

</script>
</head>
<?php
if(isset($_REQUEST['as_q'])) {
    echo $_REQUEST['as_q'];
}
?>
<body class="calendarPage">
<form action="#" method="get" id="cse-search-box">
  <input type="text" name="q" size="31"/>
  <select name="category">
    <option>Movies</option>
    <option>Film</option>
    <option>Fashion</option>
  </select>
  <select name="contributors">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
  <input type="hidden" name="as_q" id="as_q" value="" />
  <input type="submit" name="sa" value="Search" id="submit_query" />
</form>


    </body>


</html>

Answer 4

不要在“as_q”周围加上方括号。此外，请不要单击“提交”按钮。这不会捕获表单提交的所有方式。而是在表单提交事件上执行：

$("#cse-search-box").submit(function() {
  var category = $('[name=category]').val();
  var contributors = $('[name=contributors]').val();
  $('#as_q').val(category+' '+contributors);
});

注意：调用form.submit（）也会绕过这个处理程序（在某些浏览器上），但无论如何都会绕过你的click（）事件。

使用jQuery问题分配变量

4 个答案: