占位符在 select2 中不起作用

Posted

技术标签:

【中文标题】占位符在 select2 中不起作用【英文标题】:Placeholder not working in select2 【发布时间】:2018-02-19 06:12:03 【问题描述】:

我正在工作 Select2 选择框。

问题

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

我的代码:

脚本:

<script type="text/javascript">
    $(document).ready(function () 
       var data = $('#test_skill').select2(
            placeholder: "Please select an skill",
            allowClear: true
       );
    );

// I have also tried this: This is also not working
    $('#test_skill').select2(
      placeholder: 
        id: '-1', // the value of the option
        text: 'Please select an skill'
       
    );
</script>

HTML:

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

【问题讨论】:

你是否包含了select2 js和jquery 是的,先生。我已经正确地包含了它。 @Pritamkumar 否则查看此链接:***.com/questions/21413241/… 【参考方案1】:

只需将&lt;option&gt;&lt;/option&gt; 放在首位即可:

$(document).ready(function() 
  $selectElement = $('#test_skill').select2(
    placeholder: "Please select an skill",
    allowClear: true
  );
);
.skills_select2 
  width: 120px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" />
<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>

【讨论】:

曼塔普斯!格拉西亚斯!谢谢!【参考方案2】:

为了让占位符正常工作,您必须添加一个空选项(即 )作为第一个元素才能看到占位符。

来自 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>

而 javascript 将是:

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

【讨论】:

这就是我们需要 empy 选项的正确原因。【参考方案3】:

html中设置如何

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

【讨论】:

但是先生,您的回答是一种解决方法。不过谢谢你的回答。【参考方案4】:

覆盖templateSelection解决问题:

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

Original answer

【讨论】:

|| item.text 为我修复了它,因为我使用的是 templateSelection 选项,而我只返回了 item.name【参考方案5】:

对我来说最好的方法是如下设置: 将第一个值取消移位到数据/结果并在 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'
          
        );

【讨论】:

【参考方案6】:

触发select的change事件

$('#targetSelect').trigger('change');

【讨论】:

以上是关于占位符在 select2 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

占位符在 chrome 中不起作用

占位符在 IE10 中不起作用

占位符在 IE9 中不起作用 [重复]

HTML5 输入类型占位符在 IE 中不起作用

CSS:输入占位符在Mozilla中不起作用后

占位符在 IE8 和 IE9 中不起作用,即使使用 jQuery 插件