yesod 表单使用 jquery 在多选字段中设置选定值答案

【问题标题】：yesod form set selected values in multi-select field using jqueryyesod 表单使用 jquery 在多选字段中设置选定值
【发布时间】：2016-03-08 20:19:29
【问题描述】：

我暂时使用 Yesod 的 Monadic Form 来创建我的表单，但我很难使用 jquery 设置它的值。由于 Monadic Form 会为您生成表单，因此它有自己的方式来设置选择/多选字段的值

例如：

sampleForm :: Html -> MForm Handler (FormResult (Maybe [Text]), Widget)
sampleForm = renderBootstrap bConfig $ (,)
    <$> aopt (multiSelectFieldList $ colors) "Color" Nothing
  where
    colors :: [(Text, Color)]
    colors = [("Red", Red), ("Blue", Blue), ("Gray", Gray), ("Black", Black)]

输出：

   <select multiselect>
       <option value="1">Red</option>
       <option value="2">Blue</option>
       <option value="3">Gray</option>
      <option value="4">Black</option>
   </select>

我想要的是这样的：

<select id="colors" multiselect>
     <option value="Red">Red</option>
     <option value="Blue">Blue</option>
     <option value="Gray">Gray</option>
     <option value="Black">Black</option>
</select>

所以在我的 jquery 代码中：

var selectedValues = "Red,Black,Gary";
$.each(selectedValues.split(","), function(i,e){
  $("#colors option[value='" + e.replace(/\s/g, '') + "']").prop("selected", true);
});

希望你能帮助我，在此先感谢

【问题讨论】：

标签： yesod yesod-forms

【解决方案1】：

您可以用以下代码替换您的 jQuery 代码。

var selectedValues = ["Red", "Black", "Gray"];
$("option").removeAttr('selected');
$.each(selectedValues, function (idx, val) {
    $("option").filter(":contains(" + val + ")").attr('selected', true);
});

【讨论】：