You could always just render the output the results to the screen and not mess with the drop down. That would be much easier, then you could just have a "more" button at the bottom like twitter does.
On Apr 12, 7:16 am, Andy Jeffries <[email protected]> wrote: > On 10 April 2010 09:47, Samiron <[email protected]> wrote: > > > I have a collection of products that I am showing in a dropdown. Now > > at the first view it will show only first 10 products in the dropdown > > with an option "more..." at last. if user clicks the "more..." he can > > see all the following products in that dropdown list (this is not any > > ajax request, just javascript show/hide). Of course the more... option > > will hide when showing all items. > > I don't know your reasoning for doing this, but assuming it's to make the UI > a bit cleaner (rather than the fact that the list is HUGE, in which case > searching would be a better UI option anyway) I'd personally do this with > jQuery rather than Rails/Ajax. If you're using Prototype you'll need > someone who knows that framework to translate this jQuery code. > > I've tested the code below in Safari and it works fine, you may need to > tweak it for your needs though... > > Cheers, > > Andy > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html> > <head> > <title>Test option enabling</title> > <script type="text/javascript" > src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";></script> > <link rel="stylesheet" type="text/css" > href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-gr... > "> > <script type="text/javascript" charset="utf-8"> > $(document).ready(function() { > // Extract the excess options in to a jQuery data attribute and remove them > from the DOM > elems = $('#foo option:gt(9)'); > $("#foo").data('elems', elems); > elems.detach(); > > // Add the new "More..." option > $("#foo").append("<option value='' id='foo-more'>More...</option>") > > // If they choose an option with no value (the More... element) then remove > the more element, > // bring back the hidden elements and remove the data attribute > $("#foo").change(function() { > if ($("#foo").val() == "") { > $("#foo-more").remove(); > $("#foo").append($("#foo").data('elems')); > $("#foo").data('elems', null);} > }); > }); > > </script> > </head> > <body> > <select id='foo'> > <option value='1'>Option 1</option> > <option value='2'>Option 2</option> > <option value='3'>Option 3</option> > <option value='4'>Option 4</option> > <option value='5'>Option 5</option> > <option value='6'>Option 6</option> > <option value='7'>Option 7</option> > <option value='8'>Option 8</option> > <option value='9'>Option 9</option> > <option value='10'>Option 10</option> > <option value='11'>Option 11</option> > <option value='12'>Option 12</option> > <option value='13'>Option 13</option> > <option value='14'>Option 14</option> > <option value='15'>Option 15</option> > <option value='16'>Option 16</option> > <option value='17'>Option 17</option> > <option value='18'>Option 18</option> > <option value='19'>Option 19</option> > <option value='20'>Option 20</option> > </select> > </body> > </html> -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
