如何隱藏（和淡入）所選的選擇？
[英]How can I hide (and fadeIn) a chosen select?
問題描述
我正在使用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>
5 個解決方案
解決方案1
8 2012-10-22 14:41:03
將選擇放入范圍並隱藏/顯示范圍
在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>
解決方案2
3 2015-02-24 01:26:09
只需用div包裝你的選擇：
<div id="wrapper"><select id="firstChosenSelect">...</select></div>
然后在選擇完全實例化后隱藏它（使用chosen:ready ）：
$('#firstChosenSelect').chosen();
$('#firstChosenSelect').on("chosen:ready", function(){
$('#wrapper').hide();
});
解決方案3
0 2012-10-22 14:47:08
首先使用“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>
解決方案4
0 2013-03-20 15:57:41
有很多的無證選項和事件選擇這樣一個必須閱讀源找到它們。 在這種情況下，問題是我們不知道何時選擇完成構建樣式選擇框，因此我們需要使用自定義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 .on() +中我們也可以使用.on()
演示
解決方案5
0 2013-03-27 15:34:53
您可以意識到所選插件會在select標簽旁邊創建。 所以這應該足夠了：
$('#firstChosenSelect').next().hide();
$('#firstChosenSelect').next().fadeIn();
再見;
我怎么能得到 <select>用戶使用Flask選擇的標簽選項？
[英]How can I get the <select> tag option chosen by the user using Flask?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.