Question

如果这个问题不是一个重复的问题，我会非常惊讶。我已经搜索了一段时间来回答这个问题，但我还没找到。如果在我再次提出这个问题之前已经问过这个问题，如果你能指出我已回答这个问题的问题那就太棒了。

无论如何，我试图在更改后使用jQuery提交表单。那部分工作正常。不正常工作的部分是在更改表单时更改select attr。目标很简单：每次更改表单时，应将更改的值赋予选定的attr为true，然后应提交表单。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Drop Down</title>
    </head>

    <body>
        <form id='example' method='GET' action='index.php'>
            <select id='menu' name='family'>
                <option value='Kristen'>Kristen</option>
                <option value='Henk'>Henk</option>
                <option value='Andrew'>Andrew</option>
                <option value='Derek'>Derek</option>
            </select>
        </form>
    <script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
    <script src='script.js'></script>
    </body>
</html>

JS

$(document).ready(function() {
    $('#menu').change(function() {
        //remove the select attr from the option that currently has a value of selected
        $("option[selected='true']").removeAttr('selected');
        //add the selected attr with value of true to the option that was clicked on
        $(this).attr('selected', 'true');
        //submit the form
        this.form.submit();
    });
});

当值更改但所选的attr未更改时，表单正在提交。我知道所选的attr没有改变，因为第一个值Kristen在表单提交后总是显示为默认值。

提前感谢您的回答，如果这最终成为一个重复的问题，我会再次感到抱歉 - 同时我会继续寻找答案。

Answer 1

由于您未保存上次选择的值，因此默认选择的值是选项中的第一个值。

如果要保留上次选择的属性，可以在提交页面后使用cookie或使用PHP代码检查选定的值

Answer 2

尝试在您的案例中使用jQuery cookie：

if($.cookie('selectVal') != null) {
    $('#menu option[value="' + $.cookie('selectVal') + '"]').prop('selected', true);
}

$('#menu').change(function() {
    $.cookie('selectVal', $('#menu option:selected').val(), { expires: 7, path: '/'});
    $(this).find("option[selected='true']").removeAttr('selected');
    $(this).find('option:selected').prop('selected', 'true');
    this.form.submit();
});

Answer 3

您需要找到所选的选项元素，更改处理程序中的this引用select元素而不是选中的选项元素。

您可以使用:selected选择器

$(document).ready(function() {
    $('#menu').change(function() {
        //remove the select attr from the option that currently has a value of selected
        $(this).find("option[selected='true']").removeAttr('selected');
        //add the selected attr with value of true to the option that was clicked on
        $(this).find('option:selected').attr('selected', 'true');
        //submit the form
        this.form.submit();
    });
});

演示：Fiddle

jQuery更改选择attr表单并提交表单onchange

3 个答案: