javascript - Jquery val() 总是获取第一个选择值，无论选择哪个

Question

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

用户可以通过表单选择来选择将水印放置在图像上的位置。我使用 Jquery 的 .val() 来获取 id="watermark"选择的值，并将其添加为要传递给 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 而不是它时，您必须找到一种方法让它调用函数在选项中作为常量提供。