字符串插补不适用于一个以上单词的字符串

Question

The code removes all options from a select box and updates them. The issue is that the value for each option is not updating correctly.

What is happening is the value for each option is updated with just the first word of a string, which is incorrect. I want the value to be updated with the entire string.

Code:

service_selection.children().remove();
$.each(data, function(index,value){
    service_selection.append("<option value=" + value.description + ">" + value.description + "</option>");
});

Example: Let's say value.description = "Hello World Foo Bar".

The html shows it only assigns "Hello" to the option's value instead of "Hello World Foo Bar" to the option's value.

The current html after being updated looks like this:

<option value="Hello" World Foo Bar>Hello World Foo Bar</option>

Answer 1

You forgot to add " for the actual html value (it has to be surrounded by "), therfor it will cut after the first white space.

The correct code would look like this:

    service_selection.children().remove();
$.each(data, function(index,value){
    service_selection.append("<option value='" + value.description + "'>" + value.description + "</option>");
});

(notice the single ' I added after value= and before >)

Answer 2

You have issues with quotes in your current code.

I'd personally do something like:

var opts = "";
$.each(data, function(index, value) {
    opts += '<option value="' + value.description + '">' + value.description + '</option>';
});
service_selection.html(opts);