Question

我的网页上有一个下拉列表，input带有type="text"。

当我在下拉列表中选择一个选项时，我正试图通过AJAX过滤我的表的结果。

选择该选项后，应该清除输入的值（成功后）。

工作正常。

问题是我需要它来输入。它应该将输入的值发送给AJAX，然后在我提交表单时过滤结果。

我不能在成功后把它付诸实践。它将下拉列表设置为“已选择”。我不知道为什么。

HTML code：

<form action="@Url.Action("a","b")" id="filter-date" onsubmit="javascript:return false">   
    <label for="from" class="label-datepicker">from:</label>
    <input type="text" id="from" name="from" class="dateinput">
    <label for="to" class="label-datepicker">to:</label>
    <input type="text" id="to" name="to" class="dateinput">
    <button type="submit" name="submit" id="submit-date">
        OK
    </button>
</form>



<select name="Assunto" id="select-a">
    <option value="" selected="selected">--Select--</option>             
        <option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

JavaScript代码：

$("#select-a").change(function () {
        var selected = $("#select-a").val();
        var Keyword = { data: $("#select-a").val() };
        $.ajax({
            cache: false,
            type: 'GET',
            async: false,
            url: '@(Url.Action("bo", "b"))',
            data: { Keyword: selected },
            dataType: 'html',
            success: function (data) {
                $(".dateinput").val('');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
            }
        });
    });

$("#filter-date").submit(function () {
        var from = $("#from").val();
        var to = $("#to").val();
        $.ajax({
            cache: false,
            type: 'GET',
            async: false,
            url: '@(Url.Action("update", "b"))',
            data: { From: from, To: to },
            dataType: 'html',
            success: function (data) {
                $("#bodylist").html(data);
                $("#select-a").val(selected);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
            }
        });
    });

Answer 1

试试这个

正如@Anto正确地说的那样

var selected = $("#select-a").val();

以上陈述的范围应该是表格提交

$("#select-a option[selected]").removeAttr("selected");
$("#select-a option[value=" + selected+ "]").attr('selected', 'selected');

Answer 2

尝试：

$("#filter-date").submit(function () {
        var from = $("#from").val();
        var to = $("#to").val();
        $.ajax({
            cache: false,
            type: 'GET',
            async: false,
            url: '@(Url.Action("update", "b"))',
            data: { From: from, To: to },
            dataType: 'html',
            success: function (data) {
                $("#bodylist").html(data);
               // $("#select-a").val(selected); //should remove this line because we use ajax, the page is not refreshed, not need to restore the state.
                 //or $("#select-a").val(""); if you need to reset
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
            }
        });
        return false; //return false at the end to prevent form submitting
    });

删除onsubmit="javascript:return false"。不应在id属性中使用-。

Answer 3

选择全局：

 (function(){
     var selected;

     $("#select-a").change(function () {
         selected = $("#select-a").val();
         // rest of your script


 })(); // close the wrapper

编辑：在自动执行的匿名函数中包装它将使全局命名空间保持干净（感谢@jameslafferty）。

Answer 4

我找到了一个解决方案......现在已经解决了。

如果我想的话会更容易。

ajax调用.submit不允许我在成功后做一些事情，就像我需要的那样......

这我不知道。

我所做的是将选项的值从我的下拉列表设置为在ajax部分之前选择。

并且魔术已经完成..

现在正在工作。

这是我的新代码：

$("#filter-date").submit(function () {
        var from = $("#from").val();
        var to = $("#to").val();

    $('#select-a').val('selected');

        $.ajax({
            cache: false,
            type: 'GET',
            async: false,
            url: '@(Url.Action("update", "b"))',
            data: { From: from, To: to },
            dataType: 'html',
            success: function (data) {
                $("#bodylist").html(data);
                $("#select-a").val(selected);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
            }
        });

Answer 5

尝试使用jQuery函数.data(name, value)来存储selected这样的值：

$('#select-a').data('selectedValue', $('#select-a').val());

然后在提交处理程序中获取它：

var selected = $('#select-a').data('selectedValue');

使用@Nitin的代码设置所选选项：

$("#select-a option[selected]").removeAttr("selected");
$("#select-a option[value=" + selected+ "]").attr('selected', 'selected');

AJAX - 成功后清理输入值并将下拉列表设置为选中

5 个答案: