Question

美好的一天

我有一个动态填充的下拉列表，其中包含列表选项。问题是，当我从列表中选择和选项时，它会在文本左侧应用一个spacing（），就像它在树形结构中出现一样

现在，列表在树状结构中设置样式，并从服务器上的另一个部分调用。我不能改变它的间距。（因为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>

等...

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

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

这个想法是它删除所有＆amp; nbsp;从当前选择的选项中，但记住有多少填充，并在选择其他选项时恢复填充。

显然，你可以存储＆amp; nbsp;的实际顺序。而不是它们的数量，并摆脱几行代码。

请在此处查看工作小提琴：http://jsfiddle.net/aKGac/1/

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

No indentation on selected option

Jquery下拉列表将空格应用于左侧

2 个答案: