Question

我正在使用脚本将UL转换为选择下拉框：

$(function() {
$('ul.cat-nav').each(function() {
    var $select = $('<select id="category" />');
    $(this).find('a').each(function() {
        var $option = $('<option />');
        $option.attr('value', $(this).attr('href')).html($(this).html());
        $select.append($option);
    });
    $(this).replaceWith($select);
    });
});

这很好用，但我想添加“选择一个”的初始选项作为第一个选项。当我将此代码添加到上面时，它不会添加初始选项：

$("#category").html("<option value='#'>Choose One</option>");

有关我做错的任何建议吗？

Answer 1

解决方案是在添加其余选项之前添加“选择一个”<option>。

更改您的代码以包含添加的行：

$(function() {
$('ul.cat-nav').each(function() {
    var $select = $('<select id="category" />');

    $select.append("<option value='#'>Choose One</option>");

    $(this).find('a').each(function() {
        var $option = $('<option />');
        $option.attr('value', $(this).attr('href')).html($(this).html());
        $select.append($option);
    });
    $(this).replaceWith($select);
    });
});

See this jsfiddle for example.

Answer 2

尝试使用

$("#category").prepend("<option value='#'>Choose One</option>");

Answer 3

替换

var $select = $('<select id="category" />');

与

var $select = $('<select id="category"><option value="#">Choose One</option></select>');

Answer 4

Pedro确实是正确的，只是为了补充你需要使用不同JQuery方法的原因。

.html（）将替换所选HTML对象的内容，而.prepened（）将在所选项目之前添加数据（这是您想要的）。

http://api.jquery.com/html/

http://api.jquery.com/prepend/

在转换的UL列表中添加选择选项

4 个答案: