All geek questions in one place

How can I hide (and fadeIn) the selected selection?

I am using the Chosen library (http://harvesthq.github.com/chosen/) as a JQuery plugin to improve select elements. I need to hide (and then fadeIn) the selection first, but the method below does not work.

<!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
source share
5 answers

Put the selection in the span and hide / show the range

In 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

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

In jQuery

 <scirpt type="text/javascript> $('spanForfirstChosenSelect').hide(); </script>
+8
source

Just wrap your selection with a div:

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

Then hide it as soon as the selected one has been fully created (using chosen:ready ):

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

First hide your selectbox with "display: none"; or "visibility: hidden"

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

Then use the selected () and fadeIn () functions in selectbox when loading content. I would use the ondocument ready function for jQuery.

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

There are many undocumented options and events for chosen , so you need to read the source to find them. In this case, the problem is that we don’t know when the selected one finished creating the stylized rectangles, so we need to click on the liszt:ready custom event and use css opacity.

CSS

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

Javascript

We bind a function that will be run when an event occurs. The function will animate opacity up to 1 for more than 1000 ms. Then, using jquery chaining, just call .chosen() on the element immediately after.

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

In jQuery v1.7 +, we could also use .on()

demonstration

0
source

you can understand that the selected plugin creates everything next to the select tag. Therefore, this should be enough:

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

Bye;

0
source

Source: https://habr.com/ru/post/1441300/

More articles:


All Articles