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

Question

I need create kind of "treeview" look like select element by adding space to the option element text - <option name='City' /> . My select creating dynamically this way:

        $.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();
            });

Finally this must look like <option text=" SomeCityName"/>
I suppose only one way is to add HTML presentation of space -   because add just empty string not working - cut by browser. But it has been added like string, not like HTML and finally look like  CityName

Answer 1

If you only require one level of indent, you can try the <optgroup> tag like this:

<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>

...

Not the same thing exactly but it might work for you.

Answer 2

Here is solution, if someone need this:

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