jquery - Jquery下拉列表向左应用空间

Question

再会

我有一个带有列表选项的动态填充下拉列表。问题是当我从列表中选择和选项时，它会在文本左侧应用间距 ( )，就像它出现在树结构中一样

现在该列表以树形结构设置样式，并从服务器上的另一个位置调用。我不能改变间距。（因为 t 形成树形结构效果）

看看我下面的代码：

HTML

<select id="AreaTreeSelect" data-bind="value: RiskAssessment.AreaId"></select>

jQuery

               $.ajax({
                    url: "API/DataHandler.ashx?method=getareatree",
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        for (var i in result) {
                            var obj = result[i];

                            $("#AreaTreeSelect").append("<option value=\"" + obj.Id + "\">" + obj.Name + "</option>");

                        }
                    }
                });

这是它在浏览器中的填充方式：

<select id="AreaTreeSelect" data-bind="value: RiskAssessment.AreaId">
<option value="156">Ferrometals</option>
<option value="158">&nbsp;&nbsp;Admin &amp; Finance</option>
<option value="169">&nbsp;&nbsp;&nbsp;&nbsp;Warehousing</option>
<option value="170">&nbsp;&nbsp;&nbsp;&nbsp;Procurement</option>
<option value="171">&nbsp;&nbsp;&nbsp;&nbsp;Acounting</option>
<option value="855">&nbsp;&nbsp;&nbsp;&nbsp;Information Technology</option>
<option value="159">&nbsp;&nbsp;HR</option>
</select>

ETC...

选择在选择框中显示选项时如何删除空间？

Answer 1

像这样尝试它修剪空间......

$("#AreaTreeSelect").append("<option value=\"" + obj.Id + "\">" + $.trim(obj.Name) + "</option>");

Answer 2

也许这值得一试：

$('#AreaTreeSelect').change(function(){
    $(this).find('option.trimmed').each(function(){
        var padding = '';
        for(var i=0; i<$(this).data('numSpaces'); i++){
            padding += String.fromCharCode(160);
        }
        $(this).text(padding + $(this).text());
    })
    .removeClass('trimmed');
    var selOpt = $(this).find('option:selected');
    var numSpaces = selOpt.text().replace(/^(\s*).*/, '$1').length;
    selOpt
        .data('numSpaces', numSpaces)
        .text(selOpt.text().replace(/^\s*/g, ''))
        .addClass('trimmed');
});

这个想法是它删除了所有   从当前选择的选项，但记住有多少填充，并在选择另一个选项时恢复填充。

显然，您可以存储   的实际序列。而不是它们的数量，并摆脱几行代码。

在这里查看工作小提琴：http: //jsfiddle.net/aKGac/1/

此解决方案的明显缺点是当前选择的选项在展开时将出现在列表中而没有任何缩进：