0

我正在使用脚本将 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>");

关于我做错了什么有什么建议吗？

4

4 回答 4

2

<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);
    });
});

例如，请参见这个 jsfiddle。

于 2012-08-17T13:43:18.953 回答
1

尝试使用

$("#category").prepend("<option value='#'>Choose One</option>");
于 2012-08-17T13:36:05.400 回答
1

代替

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

和

var $select = $('<select id="category"><option value="#">Choose One</option></select>');
于 2012-08-17T13:37:47.040 回答
1

Pedro 确实是正确的，只是添加了您需要使用不同的 JQuery 方法的原因。

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

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

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

于 2012-08-17T13:44:10.237 回答