javascript 如何隐藏（和淡入）选定的选择？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13013756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I hide (and fadeIn) a chosen select?
提问by Christian Beil
I'm using the Chosen library (http://harvesthq.github.com/chosen/) as JQuery plugin to enhance select elements. I need to initially hide (and then fadeIn) the select, but the way below doesn't seem to work.
我使用 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>
回答by Adil
Put the select in span and hide/show the span
将选择放入跨度并隐藏/显示跨度
In html
在 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>
In javascript
在 JavaScript 中
<scirpt type="text/javascript>
document.getElementById('spanForfirstChosenSelect').display = 'none';
</script>
In jQuery
在 jQuery 中
<scirpt type="text/javascript>
$('spanForfirstChosenSelect').hide();
</script>
回答by prograhammer
Just wrap your select with a div:
只需用 div 包裹您的选择：
<div id="wrapper"><select id="firstChosenSelect">...</select></div>
Then hide it once chosenhas been fully instantiated (using chosen:ready):
然后在选择已完全实例化后隐藏它（使用chosen:ready）：
$('#firstChosenSelect').chosen();
$('#firstChosenSelect').on("chosen:ready", function(){
$('#wrapper').hide();
});
回答by feskr
First hide your selectbox with "display: none;" or "visibility: hidden"
首先用“display: none;”隐藏你的选择框 或“可见性：隐藏”
<select id="firstChosenSelect" data-placeholder="Choose a Country..." style="width:350px; display: none;" tabindex="2">
Then use the chosen() and fadeIn() functions on the selectbox when the content is loaded. I would use the ondocument ready function of jQuery.
然后在加载内容时在选择框上使用 selected() 和fadeIn() 函数。我会使用 jQuery 的 ondocument ready 功能。
<script type="text/javascript">
$(function(){ //run when content is loaded..
$('#firstChosenSelect').chosen();
$('#firstChosenSelect').fadeIn(400);
});
</script>
回答by Anthony Hatzopoulos
There's a lot of undocumented options and events for chosenso one must read the source to find them. In this case the problem is we do not know when chosen has finished building the styled select boxes so we need to tap into the custom liszt:readyevent and use some css opacity.
有许多未记录的选项和事件可供选择，因此必须阅读源代码才能找到它们。在这种情况下，问题是我们不知道 selected 何时完成了样式选择框的构建，因此我们需要利用自定义liszt:ready事件并使用一些 css opacity。
css
css
<style>
#firstChosenSelect, /* the un-styled select box */
.chzn-container /* the styled chosen container that gets created later */
{
opacity:0
}
</style>
javascript
javascript
We bind a function to be fired when the event occurs. The function will animate the opacity to 1 over 1000 ms. Then using jquery chaining, simply call .chosen()on the element immediately after.
我们绑定一个在事件发生时被触发的函数。该函数将在 1000 毫秒内将不透明度设置为 1。然后使用 jquery 链接，只需.chosen()立即调用元素。
<script>
$('#firstChosenSelect').bind('liszt:ready', function(){
$('.chzn-container').animate({
opacity:1
}, 1000);
}).chosen();
</script>
In jQuery v1.7+ we could have also used .on()
在 jQuery v1.7+ 中，我们也可以使用 .on()
demo
演示
回答by Nan1488
you can realize that chosen plugin create all next to the select tag. So with this should be enough:
您可以意识到所选插件在 select 标签旁边创建所有。所以有了这个就足够了：
$('#firstChosenSelect').next().hide();
$('#firstChosenSelect').next().fadeIn();
Bye;
再见;
