Jquery更改表单的目标

Question

我想根据选择的选项更改表单的目标。

<form id='post_form' target="targetvalue">

<select id="select" name="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

    </form>


 <script>
 $("#select").change(function() {
    var targetvalue = $("#select option:selected").text();
    $("#post_form").attr("target", targetvalue);
    });

 </script>

Answer 1

1. 如果您想将target 设置为Option 1 或Option 2，您所拥有的是正确的。但是，如果您想将目标设置为option1 或option2，您应该：

   var targetvalue = $("#select option:selected").val();
   

   可以简化为；

   var targetvalue = $(this).val();
   

2. 如果您使用 jQuery > 1.6，您应该使用 prop() 而不是 attr()。有关更多详细信息，请参阅 StackOverflow：.prop() vs .attr()

   $("#select").change(function() {
       var targetvalue = /* which ever you decide */;
       $("#post_form").prop("target", targetvalue);
   });
   

3. 您不应该只链接到生产环境中的最新版本；如果新版本的 jQuery 发布时带有重大更改，那你就完蛋了。链接到特定版本的 jQuery，并在升级到新版本之前进行彻底测试；

   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   

4. 如果您仅在<form> 元素之后定义<script> 以便能够定位它，请意识到您可以使用$(document).ready() 块在任何地方定义脚本；

   <script>
       $(document).ready(function () {
           $('#select').change(function () {
               var targetvalue = /* which ever you decide */;
               $('#post_form').prop("target", targetvalue);
           });
       });
   </script>
   

Answer 2

如果您的 HTML 页面确实是按照问题中指定的方式编写的，那么脚本将在使用您尝试修改的表单更新 DOM 后运行 - 但如果脚本是链接中的 JavaScript 文件的一部分，则您需要将其包含在 $(document).ready() 函数中 ....

感谢@T.J.Crowder 链接以下文章 -> Document ready event ?

将您的脚本放在 $(document).ready() 块中 - 这将确保 DOM 在尝试更改之前准备好：

<script type="text/javascript">
  $(document).ready(function() {
     $("#select").change(function() {
       var targetvalue = $(this).val();
       $("#post_form").prop("target", targetvalue);
     });
  });
</script>