Question

我有一个包含多个下拉列表的表单和一个列表框，在表单的末尾是一个＆＃34;确认页面＆＃34;，显示输入的所有数据。我遇到的问题是列表框允许用户选择多个项目当我实现jquery来处理它时，它也适用于下拉框。

这导致确认页面显示＆＃34; 1.Mr＆＃34;而不是＆＃34; Mr＆＃34;例如，从致敬的下拉框中。

但是列表框项正确显示，下面是我的jquery ......

  var displayConfirm = function () {
            $('.display-value', form).each(function () {
                var input = $('[name="' + $(this).attr("data-display") + '"]',form);
                if (input.is(":text") || input.is("textarea")) {
                    $(this).text(input.val());
                } else if (input.is("select")) {
                    var html = '<ol>';
                    input.find('option:selected').each(function () {
                        html += '<li>' + $(this).text() + '</li>';
                    });
                    html += '</ol>';
                    $(this).html(html);
                }
            });
        };

有没有办法改变包括像......

这样的东西

 else if (input.is("select") && input.val() < 1 ) {

由于

Answer 1

列表框助手呈现为<select multiple="multiple">。因此，要选择正确的值，您必须检查您找到的select标记中的multiple属性。

$(input.is('select')){
    if (input.attr('multiple') == "multiple") {
        var html = '<ol>';
        input.find('option:selected').each(function () {
            html += '<li>' + $(this).text() + '</li>';
        });
        html += '</ol>';
        $(this).html(html);
    } else {
        $(this).text(input.val())
    }
}

理想情况下，你也可以失去其他条件，并使其成为一个更通用的条件，你不会检查任何其他类型。所以代码的更新版本将如下所示

if (input.is("select") && input.attr('multiple') == "multiple") {
    var html = '<ol>';
    input.find('option:selected').each(function () {
        html += '<li>' + $(this).text() + '</li>';
    });
    html += '</ol>';
    $(this).html(html);
} else {
    $(this).text(input.val());
}

你可以找到一个工作小提琴here。

使用jquery获取某个下拉列表中的第一个项目和列表框中的所有项目

1 个答案: