Jquery 更改表单的目标

Jquery to change a form's target

提问by Martijn van den Broeck

I want to change the form's target based on the option which is selected.

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

<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>

回答by Matt

1. If you want to set the targetto either Option 1or Option 2, what you have is correct. However, if you want to set the target to either option1or option2, you should have:

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

   which can be simplified to just;

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

2. If you're using jQuery > 1.6, you should be using prop()instead of attr(). For more details see StackOverflow: .prop() vs .attr()

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

3. You shouldn't really be linking to just the latestversion in a production environment; if a new version of jQuery gets released with breaking changes, you're screwed. Link to a specific version of jQuery, and test thoroughly before you upgrade to a new release;

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

4. If you're onlydefining the <script>after the <form>element to be able to target it, realise you can use a $(document).ready()block to define the script anywhere;

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

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

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

   可以简化为just;

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

2. 如果你正在使用jQuery> 1.6，你应该使用prop()代替attr()。有关更多详细信息，请参阅 StackOverflow：.prop() 与 .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. 如果您只是定义了元素<script>之后<form>才能定位它，那么请意识到您可以使用$(document).ready()块在任何地方定义脚本；

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

回答by Manse

If indeed your HTML page is written as is specified in the question then the script will run after the DOM has been updated with the form you are trying to modify - but if the script is part of a JavaScript file linked in the then you need to enclose it within the $(document).ready() function ....

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

Thanks @T.J.Crowder for linking the following article on this -> Document ready event ?

感谢@TJCrowder 将以下文章链接到此 ->文档就绪事件？

Place your script within the $(document).ready() block - this will ensure the DOM is ready before attemptig to change it :

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

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