Question

我有一个选择下拉框

<select name="status" id="status" onchange="changeStatus()">
    <option value="step_1">step_1</option>
    <option value="step_2">step_2</option>
    <option value="step_3">step_3</option>
    <option value="step_4">step_4</option>
</select>

我的javascript

<script>
    function changeStatus() {
        $('select.changeStatus').change(function(){
            $.ajax({
                    type: 'POST',
                    url: 'update_status.php',
                    data: {changeStatus: $('select.changeStatus').val()},
                    dataType: 'html'
             });
        });
    });
</script>

所以我想从select下拉框中选择的值发送到php文件（update_status.php）

Answer 1

您不需要混合使用jQuery和内联JS

HTML - 我们将在函数中使用您的选择名称。我删除了内联函数调用：

<select name="status" id="status">
    <option value="step_1">step_1</option>
    <option value="step_2">step_2</option>
    <option value="step_3">step_3</option>
    <option value="step_4">step_4</option>
</select>

jQuery - 我已经从你在线调用的函数中取出了代码，不需要它。

<script>
    $(document).ready(function() {
        $('select[name="status"]').change(function(){
            var status = $(this).val();
            $.ajax({
                    type: 'POST',
                    url: 'update_status.php',
                    data: {changeStatus: status},
                    dataType: 'html'
             });
        });
    });
</script>

您可以直接测试select何时更改并立即获取其值。这是EXAMPLE

我还将jQuery包装在文档就绪处理程序中。根据您在页面中加载脚本的位置，您可能需要执行此操作以确保在加载DOM元素后立即运行jQuery。

Answer 2

$（'＃status'）。val（）用于获取选择选项的值。

所以试试这个

<script>
    function changeStatus() {
        $.ajax({
                    type: 'POST',
                    url: 'update_status.php',
                    data: {changeStatus: $('#status').val()},
                    dataType: 'html'
             });
    });
</script>

或

<script>

function changeStatus() {
    $.post("update_status.php", {changeStatus: $('#status').val()}, function(data, status){

    });
}

</script>

Answer 3

使用#选择ID。由于您已在select字段中使用javascript onchange事件，因此无需使用jquery change()事件。 jQuery使用#选择id和.来选择类。由于您使用的是id="status"，因此您必须使用#来选择ID。您尝试收集此行$('select.changeStatus').val()中的选择字段值的方式是错误的。因为那里没有名为changeStatus的类。

function changeStatus() {

        $.ajax({
                type: 'POST',
                url: 'update_status.php',
                data: {changeStatus: $('#select').val()},
                dataType: 'html'

        });
}

Answer 4

从select中删除onchange字段，并将以下代码放到脚本中，这样可行。请改用JQuery post功能。

$("#status").change( function() {

    alert($( this ).val());
    $.post('update_status.php', { changeStatus: $(this).val()},      
         function(response) {
         console.log( response);

    });

});

Answer 5

       <select name="status" id="status" onchange="changeStatus(this.value)">
            <option value="step_1">step_1</option>
            <option value="step_2">step_2</option>
            <option value="step_3">step_3</option>
            <option value="step_4">step_4</option>
        </select>


function changeStatus(value) {

        $.ajax({
                type: 'post',
                url: 'update_status.php',
                data: {'get_data:value'},
                success: function (response) {
                       document.getElementById("loadto").innerHTML=response; 
                     }

        });
}

我希望它会有所帮助.....

选择选项值用ajax发送到php文件

5 个答案: