Jquery .val总是为下拉列表返回相同的值

Question

The below is my code for an ajax multiple image upload

<script>
$(document).ready(function()
{

    var settings = {
        url: "upload.php",
        method: "POST",
        allowedTypes:"jpg,png",
        fileName: "myfile",
        formData: {"projectId":$('#project_name').val()},
        multiple: true,
        onSuccess:function(files,data,xhr)
        {
            $("#status").html("<font color='green'>Upload is success</font>");
        },
        afterUploadAll:function()
        {
            alert("all images uploaded!!");
        },
        onError: function(files,status,errMsg)
        {       
            $("#status").html("<font color='red'>Upload is Failed</font>");
        }
    }
    $("#mulitplefileuploader").uploadFile(settings);

});
</script>

Below is my textfield value

<select class="form-control" name="project_name" id="project_name">
<option value="1">Project 1</option>
<option value="2">Project 2</option>                                    
</select>

Below is my file uploader div

<div id="mulitplefileuploader">Upload</div>

The div above use a js file that can ajax upload several images at a go to a folder, its work. but when i try to send data(selected dropdown value), its always at 1 despite I use jquery to initiate.

Could there be something wrong at the document.ready portion.

Thanks

When I change the value of the dropdown, and use the image upload, the project id is always 1 , despite i change the value of the dropdown and try get the value with

$('#project_name').val()

How do I change my code so when the script to upload image is execute, it will get the current selected dropdown by the id project_name, selected.val

Thanks!

Answer 1

Use

$('#project_name option:selected').val()

which gets the selected option's value

Now if you want to get option text ie Project 1, Project 2 etc., you need to write

$('#project_name option:selected').text()

---

UPDATE

The problem is actually with your code set-up. You have created your settings inside $(document).ready . So even though if you change selected option it will not change value inside settings defined during document ready . You need to update your settings onchange or in some other way.

Answer 2

Bind the upload to the submit of the form

$(document).ready(function()
{
$('form').submit(function(e){
e.preventDefault()
    var settings = {
        url: "upload.php",
        method: "POST",
        allowedTypes:"jpg,png",
        fileName: "myfile",
        formData: {"projectId":$('#project_name option:selected').val()},
        multiple: true,
        onSuccess:function(files,data,xhr)
        {
            $("#status").html("<font color='green'>Upload is success</font>");
        },
        afterUploadAll:function()
        {
            alert("all images uploaded!!");
        },
        onError: function(files,status,errMsg)
        {       
            $("#status").html("<font color='red'>Upload is Failed</font>");
        }
    }
    $("#mulitplefileuploader").uploadFile(settings);

});
});

Answer 3

try $("#project_name option:selected").val();