Question

I have a small html select box with the value values as options

<div class="controls"> <select name="multiple" multiple="multiple">
    <option value=4fac22a963838c3d74000000|R A M|1991-10-23>1 </option>
    <option value=4fac22a963838c3d74000000|M S D|1991-10-23>2 </option>
    <option value=4fac22a963838c3d74000000|X Y |1991-10-23>3 </option>
    <option value=4fac22a963838c3d74000000|X|1991-10-23>3 </option>
    ... 

I have the following javascript code to populate a text area with the values that are highlighted:

function addValues() {
      var fields = $("select").serializeArray();
      $("#results").empty()
      jQuery.each(fields, function(i, field){
           $("#results").append(field.value + " ");
      });
 }

 $("select").change(addValues);
 addValues();

However, in the above case, it only results in:

    4fac22a963838c3d74000000|R
    4fac22a963838c3d74000000|M
    4fac22a963838c3d74000000|X
    4fac22a963838c3d74000000|X|1991-10-23>3

It seems that the white space is throwing it off. Is there any value to preserve the white space from the select option values short of replacing the white space?

Answer 1

You should use quotes:

<option value="4fac22a963838c3d74000000|R A M|1991-10-23">1 </option>