Jquery 占位符在select2中不起作用

我正在使用Select2选择框

问题 占位符未显示在select2中。它始终显示select2中选择的第一个选项。自动选择第一个选项，我想显示占位符而不是它

我的代码： 脚本：

HTML:

---

在html中设置它怎么样

<select>
  <option value="" disabled  selected>Select your option</option>
  <option value="your value ">your value</option>
</select>

只需将选择放在第一位：

$document.readyfunction{ $selectElement=$“测试技能”。选择2{ 占位符：请选择一项技能， allowClear:对 }; }; .技能\u选择2{ 宽度：120px； } 测试1 测试2 测试3

---

要使占位符正常工作，您必须添加一个空选项，即作为第一个元素来查看占位符

从Select2文档中：

请注意，由于浏览器假定在非多值选择框中选择了第一个选项元素，因此必须提供一个空的第一个选项元素，占位符才能工作

例如：

<select class="skills_select2" required name="test_skill" id="test_skill"> 
    <option></option>    
    <option value="1">TEST1</option>
    <option value="2">TEST2</option>
    <option value="3">TEST3</option>            
</select>

---

对我来说，最好的方法是如下设置： 取消将第一个值移动到数据/结果，并在select2中设置占位符

$.ajax({
      url: 'api/v1/users',
      type: 'GET',
      success: function(response) {
        let data = $.map(response, function(responseData) {
          return {
            id: responseData.id,
            text: responseData.name
          }
        });
        const selectedElement = $('#user_id');

        selectedElement.html('');

        data.unshift({id: -1, text: '', selected: 'selected', search:'', hidden:true });

        selectedElement.select2({
          theme: 'bootstrap',
          data: data,
          placeholder: {
            id: "-1",
            text: '--- Please select a user ---',
            selected:'selected'
          }
        });

覆盖模板选择解决此问题：

templateSelection: function(item) { 
   return item.name  // "name" property of received data from ajax
               || item.text; // "text" value of default selected option or placeholder text
}

---

先生，您是否包括select2 js和jqueryYes。我把它包括进去了@PritamkumarOtherwise检查此链接：但是您的答案是一个解决方法，先生。但是谢谢你的回答。这一个有我们需要empy选项的正确原因。| | item.text为我修复了它，因为我使用了templateSelection选项，并且只返回item.name值

$("#test_skill").attr(
   "data-placeholder","Please select an skill"
);

$.ajax({
      url: 'api/v1/users',
      type: 'GET',
      success: function(response) {
        let data = $.map(response, function(responseData) {
          return {
            id: responseData.id,
            text: responseData.name
          }
        });
        const selectedElement = $('#user_id');

        selectedElement.html('');

        data.unshift({id: -1, text: '', selected: 'selected', search:'', hidden:true });

        selectedElement.select2({
          theme: 'bootstrap',
          data: data,
          placeholder: {
            id: "-1",
            text: '--- Please select a user ---',
            selected:'selected'
          }
        });

templateSelection: function(item) { 
   return item.name  // "name" property of received data from ajax
               || item.text; // "text" value of default selected option or placeholder text
}