Jquery 在文本之前插入空格以动态创建选择选项元素

我需要创建一种类似于select元素的“treeview”，方法是在option元素text-

中添加空格。我的选择以这种方式动态创建：

        $.ajax({
            url: "@Url.Content("~/Home/GetDestinationsTo")",
            data: { 'isRoundTrip': $("input[name='isrt']").is(":checked") ? 2 : 1 },
            type: "post",
            cache: false
        })
            .done(function (result) {
                if (this.Error == null) {
                    optionsto.append($("<option value=''>Куда...</option>"));
                    $.each(result, function () {
                        optionsto.append($("<option name='Country' class='bold info' />").val(this.CountryToId.CountryToId).text(this.CountryToName.CountryToName));
                        optionsto.append($("<option name='City' />").val(this.CityToId.CityToId).text(" " + this.CityToName.CityToName + " (" + this.CityToCode.CityToCode + ")"));
                    });
                } else {
                    $("#errormsg").text(result.Message);
                    $("#modalerror").modal();
                }
            })
            .fail(function (xhr, ajaxOptions, thrownError) {
                $("#errormsg").text(xhr.responseText);
                $("#modalerror").modal();
            });

$.ajax({
url:“@url.Content（“~/Home/GetDestinationsTo”）”，
数据：{'isRoundTrip'：$（“input[name='isrt']”）。是否（“：checked”）？2:1}，
类型：“post”，
缓存：false
})
.完成（功能（结果）{
if（this.Error==null）{
选项to.append（$（（$）；
$。每个（结果、函数（）{
optionsto.append（$（“”）.val（this.CountryToId.CountryToId）.text（this.CountryToName.CountryToName））；
options to.append（$（“”）.val（this.CityToId.CityToId）.text（“+this.CityToName.CityToName+”（“+this.CityToCode.CityToCode+”））；
});
}否则{
$（“#errormsg”）.text（result.Message）；
$（“#modalerror”）.modal（）；
}
})
.fail（函数（xhr、ajaxOptions、thrownError）{
$（“#errormsg”）.text（xhr.responseText）；
$（“#modalerror”）.modal（）；
});

最后，这必须看起来像

---

我想只有一种方法是添加空间的HTML表示-

，因为只添加空字符串不起作用-由浏览器剪切。但是它像字符串一样添加，不像HTML，最后看起来像

CityName

如果您只需要一级缩进，您可以尝试这样的

标记：

<optgroup label="Group 1">
<option>option 1</option>
<option>option 1</option>
<option>option 1</option>
</optgroup>

<optgroup label="Group 2">
<option>option 1</option>
<option>option 1</option>
<option>option 1</option>
</optgroup>

...

选择1
选择1
选择1
选择1
选择1
选择1
...

---

不完全一样，但它可能适合您。

如果有人需要，这里有一个解决方案：

$('select#optionsto > option.city').each(function () {
     $(this).prepend("   ");
});

---

你为什么需要这个领先的空间？@charlietfl-这是客户要求的。但是为什么？如果你需要填充物，可以用css@charlietfl，我确实试过增加左边的边距，但似乎效果不太好。至少在Chrome中没有。老实说，我认为

控件是过去十年中唯一没有更新的html元素。这是迄今为止最严格的。这里有一些想法（blog.christorschultz.net/index.php/2009/02/10/indenting-html-select-options/）您可能想看看。我认为唯一的方法可能是使用

，但这样做：

SomeCityName

不是这样：

。