Note that there are some explanatory texts on larger screens.

plurals
  1. POSelect Option javascript is not working
    primarykey
    data
    text
    <p>I am trying to implement the Select - Option found here.</p> <p><a href="http://captaincodemonkey.com/" rel="nofollow">http://captaincodemonkey.com/</a></p> <p>When you press the demo button you can see the select-option online. Unfortunately when you click the second option it doesn't seem to be selected.. The default value is still there..</p> <p>Unfortunately I spent too many hours trying to modify the CSS file and now I am stuck here!!</p> <p>Can you figure out why the selection is not working properly??</p> <p>Here is my code: <a href="http://jsfiddle.net/Y86Qj/" rel="nofollow">http://jsfiddle.net/Y86Qj/</a></p> <pre><code>$(".dropdown dt a").click(function(){ if($(this).hasClass("open")) { $(this).blur(); return false; } $(this).addClass("open"); $(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast'); return false; }).blur(function() { $(this).removeClass("open"); $(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast'); }); $(".dropdown dd ul a").click(function() { var text = $(this).html(); $(this).closest("dt").find("a").html(text); $(this).parents("ul").hide(); $(this).closest("select").val($(this).find("span.value").html()); return false; }); /* Fancy Dropdowns */ function FancyDropdowns(selector){ $(selector).each(function () { var source = $(this); var selected = source.find("option[selected]"); var options = $("option", source); var markup = '&lt;dl class="dropdown"&gt;'; markup += '&lt;dt&gt;&lt;a href="#"&gt;' + selected.text() + '&lt;span class="value"&gt;' + selected.val() + '&lt;/span&gt;&lt;/a&gt;&lt;/dt&gt;'; markup += '&lt;dd&gt;&lt;ul&gt;'; options.each(function () { markup += '&lt;li&gt;&lt;a href="#"&gt;' + $(this).text() + '&lt;span class="value"&gt;' + $(this).val() + '&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;'; }); markup += '&lt;/ul&gt;&lt;/dd&gt;'; markup += '&lt;/dl&gt;'; source.after(markup); source.hide(); }); } $(document).ready(function () { FancyDropdowns(".dropdown.fancy"); $(".dropdown dt a").click(function(){ if($(this).hasClass("open")) { $(this).blur(); return false; } $(this).addClass("open"); $(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast'); return false; }).blur(function() { $(this).removeClass("open"); $(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast'); }); $(".dropdown dd ul a").click(function() { var text = $(this).html(); $(this).closest("dt").find("a").html(text); $(this).parents("ul").hide(); $(this).closest("select").val($(this).find("span.value").html()); return false; }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload