通过部分指定第一个参数值来设置 select 的值

Question

我有 2 个 select2 控件，它们都加载了相同的数据

我知道 $("#basic").val("44||four||another||data4").trigger("change") 将设置为 "invalid"

我需要设置 "invalid" 只需将值设置为 44。同样，当我指定 22 时，它必须将 selected 指定为 "bug"

注意，它应该完全匹配由||分隔的id字符串的第一个参数，即当$("#basic").val("44").trigger("change")不应该select 444.

<!DOCTYPE html>
<html>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
      <select id="advanced">
      </select>
      <select id="basic">
      </select>
      <script>
         var data = [
             {
                 id: "11||first||another||data1",
                 text: 'enhancement'
             },
             {
                 id: "22||second||another||data2",
                 text: 'bug'
             },
             {
                 id: "33||third||another||data3",
                 text: 'duplicate'
             },
             {
                 id: "444||fourfour||another||data44",
                 text: 'Junk'
             },
             {
                 id: "44||four||another||data4",
                 text: 'invalid'
             },
             {
                 id: "55||five||another||data5",
                 text: 'wontfix'
             }
         ];
         
         $("#advanced").select2({
           data: data
         })
         
         
         $("#basic").select2({
           data: data
         })
         

         $("#basic").val("44").trigger("change")
         
         
      </script>
   </body>
</html>

Answer 1

您可以创建一个 selectValue 函数来包装您的更改。这样您就可以 select 基于键的任何值的选项。

selectValue = function (value) {
  let id = data.find(item => {
    let ids = item.id.split("||")
    if(ids && ids.indexOf(value) !== -1)
      return true
  })
  // you need this check in case no id was found
  if(id) {
    id = id.id
    $("#basic").val(id).trigger("change")
  }
}
//usage
selectValue("44")

如果数据不是全局变量，请确保将其添加为函数参数

selectValue = function (data, value) {
  let id = data.find(item => {
    let ids = item.id.split("||")
    if(ids && ids.indexOf(value) !== -1)
      return true
  })
  // you need this check in case no id was found
  if(id) {
    $("#basic").val(id.id).trigger("change")
  }
}
//usage
selectValue(data, "44")

此外，这还假设您的密钥的 another 部分只是一个占位符。您的 ID 的所有部分都需要彼此唯一才能起作用。

Answer 2

使用 attributeStartsWith 选择器

var data = [{"id":"11||first||another||data1","text":"enhancement"},{"id":"22||second||another||data2","text":"bug"},{"id":"33||third||another||data3","text":"duplicate"},{"id":"444||fourfour||another||data44","text":"Junk"},{"id":"44||four||another||data4","text":"invalid"},{"id":"55||five||another||data5","text":"wontfix"}];

$("#advanced").select2({
  data: data
})

$("#basic").select2({
  data: data
})

$("#basic option[value^=44]").prop('selected', true).trigger("change")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

<select id="advanced"></select>
<select id="basic"></select>

通过部分指定第一个参数值来设置 select 的值

setting the value of select by partially specifying the first parameter value

html

javascript

jquery-select2