Question

我开始编写一个函数来用自定义HTML列表替换选择框。我似乎无法让“：selected”选择器识别所选的选项。我尝试了一些方法，我的选择框确实有选定属性的选项;]

非常感谢任何帮助。

$('select').each(function(){
    var $ulSelect = $('<ul />');
    var $options;
    var $numSelected = 0;

    $options = $('option', this).map(function(index, element){
        var $selectedClass = '';
        if ($(element).is(':selected')) {
            $numSelected++;
            $selectedClass = ' class="selected"';
        }
        return $('<li data-value="'+ $(element).val() +'"'+ $selectedClass +'>'+ $(element).text() +'<a href="#" class="x-link"></a></li>');
    }).appendTo($ulSelect);

    var $ulSelectWrap = $('<div />')
        .addClass('ul-select-wrap')
        .prepend($ulSelect)
        .prepend('<span class="selected">'+ $('option:eq(0)', this).text() + $activeText +'</span>');

    $(this).hide().before($ulSelectWrap);
});

Answer 1

我已经在jsFiddle中检查了你的代码，发现没有选择一个实际上被选中的元素的问题。我遇到的问题是你不能.appendTo一个数组（由.map（）返回）。所以我建议改用：

$.each($options, function() {
    $(this).appendTo($ulSelect);
});

我认为另一个问题是使用$('option:eq(0)', this)代替$('option:selected', this);前者始终将第一个选项显示为活动（尽管只有li元素对应于所选元素正确地具有selected类。

检查the demo以查看代码的更新版本。

选项：选中不在$ .map（）内部工作

1 个答案: