在文本之前插入空間以動態創建選擇元素

Question

我需要通過向選項元素文本添加空間來創建一種「treeview」外觀，類似於select元素 - <option name='City' />。我選擇創建動態是這樣的：

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

最後這必須看起來像<option text=" SomeCityName"/>
我想只有一個辦法是增加的空間HTML呈現 -  因爲只添加空字符串不工作 - 通過瀏覽器切割。但它已被添加像字符串，而不是像HTML和最後看起來像 CityName

Answer 1

這裏是解決辦法，如果有人需要這樣的：

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

Answer 2

如果你只需要縮進一個級別，你可以嘗試<optgroup>標籤是這樣的：

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

... 

不一樣的東西究竟但它可能適合你。