使用Select2或使用jQuery Mobile选择

Posted 2021-05-06

我正在尝试在网站上使用多个选择Select2，我也在使用jQuery Mobile。问题是他们的风格相互重叠，所以效果不好。

我发现使用data-role="none"参数，它应该禁用该特定元素上的jQuery Mobile行为，使它变得更好但是仍然无法写入Select2输入，以便搜索我的选项列表。 （我想在<select>元素上禁用jQuery Mobile之后，Select2引擎生成某种<input>元素，现在受jQuery Mobile样式的影响）

有没有办法如何将这两个人一起使用，或者我是否必须使用jQuery Mobile解决方案（like this one），我不喜欢这么多？我不介意切换到选择，如果这可以解决问题。

谢谢你的时间:)

答案

如果我正确理解了这个问题，那么它更多的是通过在输入框中输入来添加元素。如果是这种情况，那么您只需要将select元素声明为启用令牌。

首先定义类：

<select id="e1" class="myselect form-control" multiple="multiple" data-role="none">
  ...
</select> 

并初始化它：

<script>
 $(document).on("pageshow", "#myselect", function(){
  $(".myselect").select2({
    tags: true,
    tokenSeparators: [',', ' ']
  });
});
</script>

https://select2.github.io/examples.html详细解释了一切。

另一答案

data-role="none"正在工作http://jsfiddle.net/jEADR/1033/

<select multiple id="e1" style="width:300px" data-role="none">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select>