Question

Good Day

I have a dynamically populated drop down list with list options .
Problem is that when I choose and option from the list, it applies a spacing ( ) to the left of the text as it would appear in the tree stucture

Now the list is styled in a tree stucture and is called from another loation on the server. I cannot change the spacing in that. (since t forms the tree structure effect)

Look at my code below:

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>");

                        }
                    }
                });

This is how it populates in the browser:

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

How do I remove the space when the option is selected an displayed in the select box?

Answer 1

Maybe this could be worth trying:

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

The idea is that it removes all   from the currently selected option, but remembers how much padding there was and restores the padding when another option is selected.

Obviously, you could store the actual sequence of   instead of the number of them, and get rid of a few lines of code.

See working fiddle here: http://jsfiddle.net/aKGac/1/

The obvious downside with this solution is that the currently selected option will appear in the list without any indentation when it is expanded: