【问题标题】:How do I hide the search box and placeholder?如何隐藏搜索框和占位符?
【发布时间】:2015-08-11 02:57:48
【问题描述】:

基本上我需要select2 的帮助。现在我有一个带有这个 JQuery 代码的搜索框。当我预览它时,也没有占位符。

<script type="text/javascript">

$(document).ready(function() {
  $('select').select2({
  placeholder: "Select a Townhall Level",
    allowClear: true
  });
});
</script>
</head>

这是一张图片:

所以我想知道如何隐藏搜索呢?我完全没有使用 JQuery 的经验,因此将不胜感激。 感谢您抽出宝贵时间阅读!

这是我的 html:http://pastebin.com/P8in7ASX

【问题讨论】:

  • 你能把html部分也发一下吗
  • 你在用php吗?是什么决定了您希望它显示还是隐藏?
  • 这是我的 html:pastebin.com/P8in7ASX@GeorgeLee
  • @SariRahal 现在我只做设计部分,但我稍后会使用 php 来编写函数 :)
  • 占位符不显示,因为您没有空选项作为您选择的第一个选项(请参阅:stackoverflow.com/a/25410119/4665459)。但是,如果您不想要搜索框,为什么还要使用 select2?

标签: javascript jquery


【解决方案1】:

您可以像这样设置 minimumResultsForSearch 来隐藏搜索:

$(document).ready(function() {
  $('select').select2({
    placeholder: "Select a Townhall Level",
    minimumResultsForSearch: Infinity,
    allowClear: true
  });
});

如果您有一个空选项作为选择中的第一个选项,则可以显示占位符:

<select>
    <option></option>
    ... other options ...
</select>

如果您想针对特定选择而不是所有选择,并且能够对每个选择应用不同的属性,请更改为:

$(document).ready(function() {
  $('#targetElement1').select2({
    ... the properties you want applied to targetElement1 ...
  });

  $('#targetElement2').select2({
    ... the properties you want applied to targetElement2 ...
  });  
});

并提供您的选择 ID:

<select id="targetElement1">
    <option></option>
    ... other options ...
</select>

<select id="targetElement2">
    <option></option>
    ... other options ...
</select>

【讨论】:

  • 如果我想将它用于特定的盒子怎么办?
  • @JohnBorton,请参阅我的更新以了解如何定位特定元素。
  • 非常感谢您的帮助,我真的很感激,有什么方法可以联系您吗?对此我感激不尽,再次感谢!
  • 编辑:目标元素由于某种原因没有工作,即使我完全按照你说的那样做:)
  • 它有效。确保您正确复制它,并确保您没有使用 $('select') 的旧代码。
猜你喜欢
  • 2011-07-29
  • 1970-01-01
  • 2013-07-03
  • 2020-12-03
  • 2021-04-21
  • 2013-06-05
  • 2016-09-14
  • 2018-02-16
  • 2013-02-07
相关资源
最近更新 更多