Question

我正在使用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>

Answer 1

将选择放入范围并隐藏/显示范围

在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>

Answer 2

用div包装你的选择：

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

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

$('#firstChosenSelect').chosen();
$('#firstChosenSelect').on("chosen:ready", function(){
      $('#wrapper').hide();
});

Answer 3

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

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

然后在加载内容时使用selectbox上的selected（）和fadeIn（）函数。我会使用jQuery的ondocument ready函数。

<script type="text/javascript">
  $(function(){ //run when content is loaded..
    $('#firstChosenSelect').chosen();
    $('#firstChosenSelect').fadeIn(400);
  });
</script>

Answer 4

chosen有很多未记录的选项和事件，因此必须阅读源代码才能找到它们。在这种情况下，问题是我们不知道选择何时完成了样式化选择框的构建，因此我们需要使用自定义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()

demo

Answer 5

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

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

再见;

如何隐藏（和淡入）所选的选择？

5 个答案:

CSS

的JavaScript

demo