title: yesod form set selected values in multi-select field using jquery
body: <p>Temporarily I'm using <strong>Monadic Form of Yesod</strong> for creating my forms but I'm having a hard time setting values on it using jquery. Since the <strong>Monadic Form</strong> generates form for you, it has its own way to set the values on the select/multi-select field</p>
  
  <p>eg :</p>
  
  <pre><code>sampleForm :: Html -&gt; MForm Handler (FormResult (Maybe [Text]), Widget)
  sampleForm = renderBootstrap bConfig $ (,)
      &lt;$&gt; aopt (multiSelectFieldList $ colors) "Color" Nothing
    where
      colors :: [(Text, Color)]
      colors = [("Red", Red), ("Blue", Blue), ("Gray", Gray), ("Black", Black)]
  </code></pre>
  
  <p>The output:</p>
  
  <pre><code>   &lt;select multiselect&gt;
         &lt;option value="1"&gt;Red&lt;/option&gt;
         &lt;option value="2"&gt;Blue&lt;/option&gt;
         &lt;option value="3"&gt;Gray&lt;/option&gt;
        &lt;option value="4"&gt;Black&lt;/option&gt;
     &lt;/select&gt;
  </code></pre>
  
  <p>What I want is to be like this:</p>
  
  <pre><code>&lt;select id="colors" multiselect&gt;
       &lt;option value="Red"&gt;Red&lt;/option&gt;
       &lt;option value="Blue"&gt;Blue&lt;/option&gt;
       &lt;option value="Gray"&gt;Gray&lt;/option&gt;
       &lt;option value="Black"&gt;Black&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>So that in my jquery code:</p>
  
  <pre><code>var selectedValues = "Red,Black,Gary";
  $.each(selectedValues.split(","), function(i,e){
    $("#colors option[value='" + e.replace(/\s/g, '') + "']").prop("selected", true);
  });
  </code></pre>
  
  <p>hope you help me, thanks in advance</p>