Jquery更改表单的目标

时间:2011-11-28 11:24:14

标签: jquery html forms target

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

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

2 个答案:

答案 0 :(得分:14)

  1. 如果您想将target设置为Option 1Option 2,您所拥有的是正确的。但是,如果您要将目标设置为option1option2,则应该:

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

    可以简化为;

    var targetvalue = $(this).val();
    
  2. 如果你正在使用jQuery&gt; 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. 如果您<script>元素之后定义<form>以便能够定位它,请意识到您可以使用$(document).ready()阻止在任何地方定义脚本;

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

答案 1 :(得分:0)

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

感谢@ T.J.Crowder链接以下文章 - &gt; 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>