选择2个jquery自定义属性country name和大写名称

sxpgvts3 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(331)

我试图添加一个自定义属性来选择2个选项，即使我用“数据名”搜索，该选项也会显示出来

<select name="countries" class="vat" id="example">
        <option value="USA" data-name="Newyork" selected="selected">United States</option>
        <option value="UK"  data-name="london">Unied Kingdom</option>
        <option value="DE"  data-name="Berlin">Germany</option>
    </select>

我试图在搜索中接近，如果我键入berlin，德国应该出现在选择列表中

<script type="text/javascript">
        $(document).ready(function() {
            $("#example").select2().find(":selected").data("name");
        });
    </script>

请在这方面帮助我
谢谢

jquery JavaScript Option jquery-select2 drop-down-menu

来源：https://stackoverflow.com/questions/68501629/select-2-jquery-custom-attribute-country-name-with-capital-name

2条答案

按热度按时间

xkftehaa1#

您可以使用select2插件的matcher方法。所以，每当用户在输入框内键入时，您都可以使用 ..indexOf(input_value) . 如果值为 true 然后选项将显示，否则它将被隐藏。
演示代码：

$(function() {
  $("select").select2({
    "width": "150px",
    matcher: function(term, text, option) {
      //get input box value 
      var input_value = $(".select2-input").val().toLowerCase();
      //get the data attribute value..
      var data_name = $(option[0]).data("name").toLowerCase();
      //if match ..show that option
      return data_name.indexOf(input_value) != -1 || option[0].textContent.toLowerCase().indexOf(input_value) != -1;
    }
  })

})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>

<select name="countries" class="vat" id="example">
  <option value="USA" data-name="Newyork" selected="selected">United States</option>
  <option value="UK" data-name="london">Unied Kingdom</option>
  <option value="DE" data-name="Berlin">Germany</option>
</select>

赞(0）回复(0）举报 2021-09-13

uwopmtnx2#

试试这个，你可以搜索州和国家将显示

<input list="brow">
<datalist id="brow">
        <option value="USA" data-name="Newyork" selected="selected">new york, florida</option>
        <option value="UK"  data-name="london">london</option>
        <option value="DE"  data-name="Berlin">berlin, other states</option>

</datalist>

赞(0）回复(0）举报 2021-09-13

我来回答

选择2个jquery自定义属性country name和大写名称

2条答案

相关问题

热门标签

最新问答