Блог

Главная - Вопросы по программированию - показывать форму запроса элемента при выборе неизвестного элемента в select2

показывать форму запроса элемента при выборе неизвестного элемента в select2

#javascript #forms #jquery-select2

#javascript #формы #jquery-select2

Вопрос:

Я хотел бы использовать select2 для отображения поиска компании. Если компания, которую ищет пользователь, отсутствует в текущем наборе данных, нам нужно показать форму запроса компании, чтобы добавить данные.

HTML

 <head>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>
<body>
<select class="js-example-basic-single" name="company">
  <option value="1">(FB) Facebook</option>
  <option value="2">(AAPL) Apple</option>
  <option value="3">(NFLX) Netflix</option>
  <option value="4">(GOOG) Alphabet</option>
</select>
<form style="margin: 100px 0 0 0; display: none">
  <h2>
    Company not found
  </h2>
  <button>
    Add Company?
  </button>
</form>
</body>

javascript

 /**
 * Requrirements:
 * 1) indicate in dropdown that the user will be adding the company. Maybe by displaying "Add: GOOG"
 * 2) unhide company request form when a new company is selected.
 */
$(document).ready(function() {
  let elm = $('.js-example-basic-single');
  elm.select2({
    placeholder: "Company",
    tags: true,
    createTag: function(params) {
      console.log('createTag', params);
      return {
          id: params.term,
          text: params.term.toUpperCase()
      }
    },
    insertTag: function(data, tag) {
        tag.isTag = true;
        data.push(tag);
    },
  }).on("change:select", function(e) {
      console.log('select');
      var data = e.params.data;
      var requestForm = document.querySelector('form');
      if (data.isTag) {
          console.log('local tag selected', data);
          requestForm.style.display = 'block';
      } else {
          requestForm.style.display = 'none';
      }
  });
});

jsfiddle в https://jsfiddle.net/morenoh149/mf6Lxyc0/21 / любая помощь приветствуется

Ответ №1:

Вы используете change:select , но это не событие select2. Самое близкое к этому событие, change.select2 но это не то, что вы хотите. Нужное вам событие select2:select , которое происходит всякий раз, когда выбирается результат.

Учитывая ваш существующий код, вы уже установили isTag значение true so, чтобы остальная часть вашего кода работала так, как вы ожидаете:

 }).on("select2:select", function(e) {
  console.log('select');
  var data = e.params.data;
  var requestForm = document.querySelector('form');
  if (data.isTag) {
    console.log('local tag selected', data);
    requestForm.style.display = 'block';
  } else {
    requestForm.style.display = 'none';
  }
});