jquery - jquery中的selectmenu缩进文本

Question

我有一个选择。我想在父子之间进行级联显示。一切都是动态的。我想要一些东西

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

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

1. 更改字体...我更喜欢使用所有字体的解决方案
2. 用...替换空格？
3. 使用 CSS:但是如何递归？

Answer 1

我改变了一点想法。最好让自定义列表在本地机器中，而不是通过服务器然后在 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); });
}