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

Question

暂时我使用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);
});

希望你能帮助我，提前谢谢

Answer 1

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

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