如何在选择下拉列表中的文本框中添加占位符

时间:2017-04-18 11:50:36

标签: jquery drop-down-menu placeholder bootstrap-select jquery-selectbox

enter image description here

 <select   class="form-control selectpicker" id="specialty_id" data-live-search="true"  tabindex="-98" name="specialty_id" >

                                <option selected="" value="0" id="ee" <?php if(isset($_GET['sp_id']) && $_GET['sp_id'] == 0): ?>{{ 'selected="selected"' }} <?php endif; ?>>Choose a Sp</option>
                                  @foreach($searchdropdown['dsp'] as $dsptext)
                                    <option value="{{ $dsptext->spect }}" <?php if(isset($_GET['sp_id']) && $_GET['sp_id'] == $dsptext->spect): ?>{{ 'selected="selected"' }} <?php endif; ?>>{{ $spdata->sp }}</option>

                                  @endforeach

                              </select>

如何在selectbox中为该输入文本添加占位符。该文本框是动态生成的。我研究了这个,但无法找到任何有用的内容。请帮助我。

例如:请参阅此链接 https://silviomoreto.github.io/bootstrap-select/examples/#live-search

5 个答案:

答案 0 :(得分:4)

https://github.com/silviomoreto/bootstrap-select/blob/master/test.html

尝试此操作
<select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">
            <optgroup label="filter1">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
            <optgroup label="filter2">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
            <optgroup label="filter3">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
          </select>

答案 1 :(得分:1)

确定。 我有一个解决方案给你。 请将以下选项添加到Jquery函数调用:

$('.selectpicker').selectpicker(
  {  
    liveSearchPlaceholder: 'Placeholder text'
  }
);

我制作了CodePen live example here ..

答案 2 :(得分:0)

您能否添加数据-live-search-placeholder =&#34;示例&#34;属性的属性?

答案 3 :(得分:0)

对于整个项目,您可以使用jquery代码。

    $(document).ready(function(){

      //selectpicker search placeholder
      $('.bs-searchbox input').attr('placeholder', 
      'Search record..');
     });

答案 4 :(得分:0)

只需在select标签中添加此data-title属性

data-title="Search Here"

例如

<select class="selectpicker" data-live-search="true" data-title="Search Here">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
</select>