I have the following jquery code that is looping through the returned json data, for some reason is it splitting the suburb by a space when being assigned as the value but not as the text, I cannot work out why this is happening.

MY CODE

$.each(data , function( index, obj ) {
                    $.each(obj, function( key, value ) {
                        var suburb = $.trim(value['mcdl01']);
                        var number = $.trim(value['mcmcu']);
                         $("#FeedbackBranchName").append("<option value=" + suburb + ">" + suburb + " (" + number + ")</option>");
                    });
                });

SAMPLE RETURNED RESULTS

<option **value="AIRLIE" beach=""**>AIRLIE BEACH (4440)</option>
<option value="ASHMORE">ASHMORE (4431)</option>
<option **value="BANYO" commercial=""**>BANYO COMMERCIAL (4432)</option>
<option value="BEENLEIGH">BEENLEIGH (4413)</option>
<option value="BERRIMAH">BERRIMAH (4453)</option>
<option **value="BOWEN" hills=""**>BOWEN HILLS (4433)</option>

Notice how for AIRLEE BEACH, BANYO COMMERICAL AND BOWN HILLS the second word has been separated out from the value attribute but it's fine at the text level.

Anyone have any idea why this might happen?

Thanks