Skip to content Skip to sidebar Skip to footer

How To Preserve Space In HTML Select Option List

I have one select control. I try to update this control with jquery but the value after space omitting. if (brandObj != '') { brandObj = eval('(' + brandObj + ')'); $.each

Solution 1:

You should wrap value of attribute value in quote(Quote It). If you do not wrap them in quote then value after space will be considered as attribute itself:

$("#<%=listBrand.ClientID%>").append("<option value='"+ item.Brand + "'>" + item.Brand + "</option>");

Solution 2:

As I've mentioned in the comment, the problem can be solved by wrapping the value attribute value in the quotes.

.append("<option value='" + item.Brand + "'>" ... 
                       ^                  ^

However, I'll recommend the use of Option constructor to create new <option> element dynamically.

Demo:

var arr = [{
    text: 'Hello World!',
    value: 'hello World'
}, {
    text: 'Bye World!',
    value: 'bye World'
}];

var select = document.getElementById('mySelect');

// Iterate over array
arr.forEach(function (obj, i) {
    // Create new <option> with dynamic value and text
    // Add the <option> to the <select>
    select.appendChild(new Option(obj.text, obj.value));
});
<select id="mySelect"></select>

Solution 3:

Thanks to : Milind Anantwar, I adapted his idea and solved a problem that’s been nagging for about 5 days.

    <?php
    foreach($rows as $row):
        $outputstr="$row[Mfrname]";
        $goodstr="<option value='".$outputstr."''>".$outputstr."</option>";
        echo $goodstr;
    endforeach;
    ?>

Post a Comment for "How To Preserve Space In HTML Select Option List"