5

我使用 Chosen 库 (http://harvesthq.github.com/chosen/) 作为 JQuery 插件来增强选择元素。我需要最初隐藏（然后淡入）选择，但下面的方法似乎不起作用。

<!doctype html> 
<html lang="en"> 
<head>
   <link rel="stylesheet" href="chosen/chosen.css" />
</head>
<body>
   <select id="firstChosenSelect" data-placeholder="Choose a Country..." style="width:350px;" tabindex="2">
      <option value=""></option> 
      <option value="United States">United States</option> 
      <option value="United Kingdom">United Kingdom</option> 
      <option value="Afghanistan">Afghanistan</option>
   </select>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
   <script src="chosen/chosen.jquery.js" type="text/javascript"></script>
   <script type="text/javascript">
     $('#firstChosenSelect').chosen();
     $('#firstChosenSelect').hide();
   </script>
</body></html>
4

5 回答 5

8

将选择放入跨度并隐藏/显示跨度

在 html 中

<span id="spanForfirstChosenSelect" >
  <select id="firstChosenSelect" data-placeholder="Choose a Country..." style="width:350px;" tabindex="2">
      <option value=""></option> 
      <option value="United States">United States</option> 
      <option value="United Kingdom">United Kingdom</option> 
      <option value="Afghanistan">Afghanistan</option>
  </select>
</span>

在 JavaScript 中

<scirpt type="text/javascript>    
     document.getElementById('spanForfirstChosenSelect').display = 'none';
</script>

在 jQuery 中

<scirpt type="text/javascript>    
     $('spanForfirstChosenSelect').hide();
</script>
于 2012-10-22T14:41:03.677 回答
3

只需用 div 包装您的选择：

<div id="wrapper"><select id="firstChosenSelect">...</select></div>

然后隐藏它一旦选择已完全实例化（使用chosen:ready）： 

$('#firstChosenSelect').chosen();
$('#firstChosenSelect').on("chosen:ready", function(){
      $('#wrapper').hide();
});
于 2015-02-24T01:26:09.927 回答
0

首先用“display: none;”隐藏你的选择框 或“可见性：隐藏”

<select id="firstChosenSelect" data-placeholder="Choose a Country..." style="width:350px; display: none;" tabindex="2">

然后在加载内容时在选择框上使用 selected() 和 fadeIn() 函数。我会使用 jQuery 的 ondocument 就绪功能。

<script type="text/javascript">
  $(function(){ //run when content is loaded..
    $('#firstChosenSelect').chosen();
    $('#firstChosenSelect').fadeIn(400);
  });
</script>
于 2012-10-22T14:47:08.640 回答
0

你可以意识到选择的插件在选择标签旁边创建。所以这应该足够了：

$('#firstChosenSelect').next().hide();
$('#firstChosenSelect').next().fadeIn();

再见;

于 2013-03-27T15:34:53.117 回答
0

有很多未记录的选项和事件可供选择，因此必须阅读源代码才能找到它们。在这种情况下，问题是我们不知道选择何时完成构建样式选择框，因此我们需要利用自定义liszt:ready事件并使用一些 css 不透明度。

css

<style>
    #firstChosenSelect,  /* the un-styled select box */
    .chzn-container      /* the styled chosen container that gets created later */
    {
      opacity:0
    }
</style>

javascript

我们绑定一个在事件发生时触发的函数。该函数将在 1000 毫秒内将不透明度设置为 1。然后使用 jquery 链接，只需.chosen()在之后立即调用元素。

<script>
  $('#firstChosenSelect').bind('liszt:ready', function(){
    $('.chzn-container').animate({
      opacity:1
    }, 1000);
  }).chosen(); 
</script>

在 jQuery v1.7+ 中，我们也可以使用.on()

演示

于 2013-03-20T15:57:41.633 回答