11

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(brandObj, function(i, item) {
        $("#<%=listBrand.ClientID%>").append(  "<option value="+ item.Brand + ">" + item.Brand + "</option>");
    });

}

The data which I get from server

enter image description here

But after it render as HTML select , it omit the word after space.whole value is there but once I get the value , it have only half(the value which in double quote). I tried to add &nbsp; but it is showing as it is. it is not rendering as space. please give your suggession.

enter image description here

Dharman
  • 30,962
  • 25
  • 85
  • 135
nichu09
  • 882
  • 2
  • 15
  • 44
  • 6
    `.append(" – Tushar Mar 21 '16 at 10:25
  • `eval()`? Seriously? I don't think you really want that and I'm pretty sure you don't need it. What values can `brandObj` have? – Tomalak Mar 21 '16 at 10:26
  • You did not answer my question. What value does `brandObj` have? – Tomalak Mar 21 '16 at 10:30
  • 1
    brandObj have json string which i get from server. – nichu09 Mar 21 '16 at 10:37
  • 1
    Hm, the right thing to do for IE7 would be to include [json2.js](https://github.com/douglascrockford/JSON-js) with conditional comments and call `JSON.parse()`. IE8 and up support JSON natively and don't need an extra libaray. In other words unless you are targeting IE7 you can use `JSON.parse()` directly. See http://stackoverflow.com/questions/3326893/is-json-stringify-supported-by-ie-8. – Tomalak Mar 21 '16 at 10:45
  • @nichu09 Use [`JSON.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Browser_compatibility). Supports IE8+ – Tushar Mar 21 '16 at 10:45

3 Answers3

20

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>");
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
12

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>
Community
  • 1
  • 1
Tushar
  • 85,780
  • 21
  • 159
  • 179
  • 1
    Looking for this hours and hours, thanks Tushar, For me, the other solutions did not work when you need the value like 'myvalue 123' in dropdown and you get 'myvalue when you need the value. – Houshang.Karami Dec 16 '19 at 19:27
0

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;
    ?>
RayH
  • 1
  • 3