使用 AJAX Select2 在列表中为空或其他值时更改按钮

Question

我正在尝试了解 AJAX Select2

的工作人员

我有这个：

$(document).ready(function() {
    $('.js-example-basic-single').select2();
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<form>
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
                    <button id="importerAffaire" type="submit" >Importer</button>

</form>

所以，我想要的是，当我在列表中放入另一个值时，我想显示另一个按钮：

<button id="creerAffaire" type="submit" >Create</button>

最重要的是考虑列表中的新值或其他方式，因为我想要的是，如果该值不存在，则需要推送到数据库中。

那么你能给我解释一下最好的方法吗？谢谢

Answer 1

如果我理解正确的话，您希望能够向 select 添加一个新条目，如果添加了一个新条目，请通过 AJAX 将其发送到您的后端，这样您就可以更新数据库中的选项值。遵循 select2 文档： https://select2.org/tagging

$(document).ready(function() {
  $('.js-example-basic-single').select2({
    tags: true,
    createTag: createEntry
  });
  $("form").submit((e) => e.preventDefault())
  $("select").change(handleSubmit)
});

function createEntry(params) {
  const term = $.trim(params.term);

  if (term === '') {
    return null;
  }

  return {
    id: term,
    text: term,
    newTag: true // add additional parameters
  }
}

function handleSubmit(e) {
  console.log("SUBMITTING VALUE", e.target.value)
  // SEND THE SELECTED OPTION TO YOUR BACKEND, THERE YOU PERFORM THE CHECK IF THE SELECTED VALUE IS A NEW VALUE OR NOT
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<form>
  <select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</form>

使用 AJAX Select2 在列表中为空或其他值时更改按钮

Change a button when empty or another value in list with AJAX Select2

javascript

ajax