选择菜单在jquery中缩进文本

我有一个选择。我希望在父级和子级之间有一个级联显示。一切都是动态的。 我想要点东西

Parent1
  |---Child1
  |---Child2
  |     |---Child21
  |     |     |---Child211
  |     |---Child22
Parent2

。。。 我写这段代码：

 $(function () {
    GetlstParents();
    $("#lstFiltreFamParent").selectmenu().selectmenu("menuWidget").addClass("lstFiltreoverflow");

    });

    function GetlstParents() {
    $.ajax({
        type: "POST",
        url: "/Classement/Interne.aspx/GetlstParents",
        data: '{"PageEnCours":"' + document.location.href.toString() + '"}',
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        success: function (msg) {
            if (msg.d.Retour.Reussi) { BuildLstParents(msg.d.LstParents); }
            else { AfficheMsgRetour(msg.d.Retour); }
        },
        error: function () { AfficheMsgRetour({ Reussi: false, Titre: "Liste des classements   parents", Msg: "Erreur accès fonction." }); }
    });
    }

    function BuildLstParents(Lst) {
    var LaList = $("#lstFiltreFamParent");
    $('option', "#lstFiltreFamParent").remove();
    //var Spacelst = "|     ";
    var Spacelst = "|         ";
    $.each(Lst, function (i, item) {
        LaList.append($('<option>', { value: item.Id,  text: Spacelst.repeat(item.Depth -1) +"|--- " +  item.DisplayName }));
    });
    }

它运行得很完美，唯一的问题是空白比一个字母还小。而且显示不是很好。 我有三个选择

更改字体。。。我更喜欢所有字体的解决方案 将空白替换为。。。？ 使用CSS：但如何放置递归？

---

我改变了一点主意。最好让自定义列表位于本地机器中，而不是服务器 然后在jquery中，我创建了一个函数

function BuildLstParents(Lst) {
var LaList = $("#lstFiltreFamParent");
$('option', "#lstFiltreFamParent").remove();
var Spacelst = "|      ";
$.each(Lst, function (i, item) { $('<option id="' + item.Id + '">' + (item.Depth==0?item.DisplayName.capitalize():Spacelst.repeat(item.Depth - 1) + "|--- " + item.DisplayName.capitalize()) + '</option>').appendTo(LaList); });
}

---

你最好的选择是使用monospace字体。但我使用的是jQueryUI插件。。。我不想修改样式。解决方案：函数BuildLstParentsLst{var LaList=$lstfiltremparent；$'option'，lstfiltremparent.remove；var Spacelst=|///var Spacelst=|$.eachLst，函数i，项{$+Spacelst.repeatitem.Depth-1+|--+item.DisplayName+.appendtolist；//LaList.append$，{value:item.Id，text:Spacelst.repeatitem.Depth-1+|--+item.DisplayName}；}；}为什么？和之间有什么区别？对不起，我没有发布一个正确的解决方案，我不同意你将无法正确对齐，因为其他字体会成比例，因此空格也会相应不同。最好的办法是使用由通用单空格字体支持的单空格字体系列。就像代码和预标记一样。阅读：这是我的回答。最好不要使用。更简单的方法是在选项的字符串开头添加多个空格。