0

我已经开始编写一个函数来用自定义 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);
});
4

1 回答 1

0

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

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

我想，另一个问题是使用$('option:eq(0)', this)而不是$('option:selected', this); 前者总是将第一个选项显示为活动的（尽管只有li与所选元素对应的元素正确具有selected类）。

检查演示以查看代码的更新版本。

于 2012-07-06T09:17:20.650 回答