jQuery val（）始终获取第一个选择值，无论选择了哪个

Question

我正在使用Jquery允许用户通过Ajax在表单中上传图像（在实际提交表单之前上传图像）。 我已经添加了向每个上传的图像添加水印的功能（这是在upload_image.php中完成的），这一部分工作正常。

用户可以通过表单选择来选择希望将水印放置在其图像上的位置。 我正在使用Jquery的.val（）来获取id =“ watermark” select的值，并将其添加为要传递给upload_image.php的查询字符串值。

问题是无论我在表单中实际选择什么，它总是通过第一个选择值。 我试着将它放在一个函数中（认为它是在页面加载中获取值），没有运气。 我将选择更改为单选按钮。 它仍然获取页面上第一个单选按钮的值； 不管您选择什么

这是脚本中处理此问题的部分：

<script type="text/javascript" >
$(function(){

    // build URL to php upload script with watermark placement
    function setWatermark() {
        var uploadUrl = 'http://www.mysite.com/upload_image.php?w=';
        var watermarkValue = $('#watermark').val();
        var watermarkUrl = uploadUrl + watermarkValue;
        return watermarkUrl;
    }

    var btnUpload=$('#upload');
    new AjaxUpload(btnUpload, {
        action: setWatermark(),
        name: 'uploadfile',
    });

});
</script>

这是表格（删除了无关字段）：

<form id="image_form" action="this_form.php" method="post" enctype="multipart/form-data">
    <select id="watermark">
        <option value="top_left">Top Left</option>
        <option value="top_right">Top Right</option>
        <option value="center">Center</option>
        <option value="bottom_left">Bottom Left</option>
        <option value="bottom_right">Bottom Right</option>
    </select>
    <div id="upload" ><span><img src="upload_button.jpg" /></span></div>
</form>

Answer 1

要执行此代码：

new AjaxUpload(btnUpload, {
    action: setWatermark(),
    name: 'uploadfile',
});

浏览器必须首先构造参数以传递给构造函数。 要构造第二个参数，即对象，它必须调用setWatermark来获取action属性的值。 这是您的问题所在； setWatermark所述当被调用AjaxUpload对象被创建。

我不知道AjaxUpload是什么，但是您必须找到一种方法来使它在需要action时调用一个函数，而不是在选项中将其作为常量提供。