时间戳

首页 > 解决方案 > 使用 jquery 在编辑模式下显示多选值

javascript - 使用 jquery 在编辑模式下显示多选值

问题描述

我在stackoverflow中问了这个问题。我得到了答案，它现在正在工作。我的问题是我选择了两个值并将其存储在后端。现在，如果我想在进入页面时编辑多选值，我必须在框中查看这些选定的值。所以我尝试了

<select class="js-select2" multiple="multiple">
                  <option value="{{opt value which is previously selected}}">Option1</option>
                  <option value="O2" data-badge="">Option2</option>
                  <option value="O3" data-badge="">Option3</option>

那是行不通的。因此，我尝试 在编辑时使用 select2 在输入中显示选定的多个选定项目 How to Set Selected value in Multi-Value Select in Jquery-Select2.?

没有任何工作。

我的实际代码是

<<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="IE=8">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">

      <title>SELECT</title>

      <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
      <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />

      <link rel="stylesheet" href="mycss.css">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
      </head>
  <body>
      <div class="container">
          <div class="row">
          <h4>checkbox</h4>
              <select class="js-select2" multiple="multiple">
                  <option value="O1" data-badge="">Option1</option>
                  <option value="O2" data-badge="">Option2</option>
                  <option value="O3" data-badge="">Option3</option>
                  <option value="O4" data-badge="">Option4</option>
                  <option value="O5" data-badge="">Option5</option>
                  <option value="O6" data-badge="">Option6</option>
                  <option value="O7" data-badge="">Option7</option>
                  <option value="O8" data-badge="">Option8</option>
                  <option value="O9" data-badge="">Option9</option>
                  <option value="O10" data-badge="">Option10</option>
                  <option value="O11" data-badge="">Option11</option>
                  <option value="O12" data-badge="">Option12</option>
                  <option value="O13" data-badge="">Option13</option>
              </select>

          </div>
      </div>
      <script>
         $(".js-select2").select2({
            closeOnSelect : false,
            placeholder : "Placeholder",
            allowHtml: true,
            allowClear: true,
            tags: true // создает новые опции на лету
        });

            $('.icons_select2').select2({
                width: "100%",
                templateSelection: iformat,
                templateResult: iformat,
                allowHtml: true,
                placeholder: "Placeholder",
                dropdownParent: $( '.select-icon' ),//обавили класс
                allowClear: true,
                multiple: false
            });


                function iformat(icon, badge,) {
                    var originalOption = icon.element;
                    var originalOptionBadge = $(originalOption).data('badge');

                    return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '<span class="badge">' + originalOptionBadge + '</span></span>');
                }
      </script>

  </body>
  </html>

我的 CSS

body {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
}
.select2-container {
  min-width: 400px;
}

.select2-results__option {
  padding-right: 20px;
  vertical-align: middle;
}
.select2-results__option:before {
  content: "";
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  border: 2px solid #e9e9e9;
  border-radius: 4px;
  background-color: #fff;
  margin-right: 20px;
  vertical-align: middle;
}
.select2-results__option[aria-selected=true]:before {
  font-family:fontAwesome;
  content: "\f00c";
  color: #fff;
  background-color: #f77750;
  border: 0;
  display: inline-block;
  padding-left: 3px;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #eaeaeb;
    color: #272727;
}
.select2-container--default .select2-selection--multiple {
    margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #f77750;
    border-width: 2px;
}
.select2-container--default .select2-selection--multiple {
    border-width: 2px;
}
.select2-container--open .select2-dropdown--below {

    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);

}
.select2-selection .select2-selection--multiple:after {
    content: 'hhghgh';
}
/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
    display: none;
}
.select-icon .placeholder {
    display: none;
}
.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
    display: none !important;
    /* content: "" !important; */
}
.select-icon  .select2-search--dropdown {
    display: none;
}

我的问题是我使用上面的代码选择了一组值并将其存储在数据库中。现在，如果我进行编辑，我想在编辑 UI 页面中显示选定的值。我可以看到我从后端获取的数据，并且可以在前端显示它。数据格式在列表 ['1','2'] 中。如果我转到页面，我应该如何在编辑模式下显示这个 1 和 2

标签： javascripthtmljquerycss

解决方案

推荐阅读