Question

我正在尝试获取下拉菜单中所选项的值，以相应地使用Ajax调用更新相同的页面（表单）。例如，根据用户选择显示额外的表单字段，如一组新的输入字段，如果选择“NEW”，但我还不是这么远。

形式：

<form action="#" method="post" class="form" id="insertItem">
    <fieldset>
        <dl>
            <dt>
                <label for="manufacturer">Manufacturer</label>
            </dt>
            <dd>
                <select size="1" name="manufacturer" id="manufacturer">
                    <option value="">- Choose -</option>
                    <option value="">-- NEW --</option>
                    <option value="">Option 1</option>
                    <option value="">Option 2</option>
                    <option value="">Option 3</option>
                    <option value="">Option 4</option>
                </select>
            </dd>
        </dl>
       (...)
       more items
       (...)
</form>

脚本：

$('#manufacturer').change(function() {
        var val = $("#manufacturer option:selected").text()
        $.ajax({
            url : "path_to/file.php",
            type : "GET",
            data : { selectedValue : val},
            success : function(response) {
                console.log("check " + response);
//            $('#test').html(response);
            },
            error: function() {
                console.log('Error');
                alert('Error');
            }
        });
    });

控制台没有显示任何内容，也没有错误。它也没有显示在“网络”选项卡中。我做错了什么？（jQuery 1.12.4包含正确且有效。）

Answer 1

指定ajax调用中的url。没有网址，它确实无法正常工作。

$('#manufacturer').change(function () {
    myVal = $(this).val();

        $.ajax({
        url         : 'ajax_process.php',
        method      : 'post',
        data        :
        {
            variable : myVal
        },
        success     : function(response)
        {

        });
    });

Answer 2

ajax调用有2个语法。

$.ajax("url", [setting])

或

$.ajax([setting])

但在第二种方式中，您需要在设置对象中指定网址。

并且$（this）.val（）错误的是范围，保存＆＃34;这个＆＃34;在ajax电话之前：

$('#manufacturer').change(function() {
    var val = $(this).val() ;
    $.ajax({
         url :  "myurl",
        type:'POST',
        data : { selectedValue : val},
        success : function(response) {
            console.log("check " + response);
//          $('#test').html(response);
        },
        error: function() {
            console.log('Error');
            alert('Error');
        }
    });
});

NB：使用当前的html，$（this）.val（）将始终等于空字符串。如果要使用所选选项的文本：

var val = $("#manufacturer option:selected").text()

Answer 3

我已经测试过此代码可以调用http处理程序（请替换代码中的url ）。你的代码有几个问题。您正在使用Ajax但未指定url，该调用是通过POST调用的，但未设置content-type。除此之外，当您尝试获取所选值时，它会变为空，因为html标记不是为选项声明值而是仅为文本声明值。所以，我已经改变了jQuery代码来获取所选文本。

<script type="text/javascript">
    $('#manufacturer').change(function () {
        $.ajax({
            url: 'http://localhost:9145/Handler.ashx',
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded',
            data: { selectedValue: $('#manufacturer option:selected').text() },
            success: function (response) {
                console.log("check " + response);
                alert("check " + response);
            },
            error: function () {
                console.log('Error');
                alert('Error');
            }
        });
    });
</script>

这只是客户端代码。在服务器端，您的脚本应配置为接收输入参数。

下拉菜单Ajax调用不起作用

3 个答案: