Attempting to implement JSFiddle example
Question
I'm attempting to recreate a JSFiddle example that converted a dropdown menu into a radio button. Here is the link that I'm referring to: link
After creating an HTML file, I embed the CSS and Javascript in the header of the html document. After that I went to see if it worked and it appears to have not. Here is the code that I currently have:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> /* http://jsfiddle.net/496c9/ */ .radioSelectContainer > select { /*display: none;*/ } .radioSelectContainer > label { display: inline-block; margin: 0.3em 0.3em 0 0; background-color:#EFEFEF; border-radius:4px; border:1px solid #D0D0D0; } .radioSelectContainer > label > span { padding:0.2em; text-align:center; display:block; } .radioSelectContainer > label > input { position:absolute; top:-20px; } .radioSelectContainer > label > input:checked + span { background-color:#404040; color:#F7F7F7; } </style> <script> $(function () { $('.radioSelect').each(function (selectIndex, selectElement) { var select = $(selectElement); var container = $("<div class='radioSelectContainer' />"); select.parent().append(container); container.append(select); select.find('option').each(function (optionIndex, optionElement) { var radioGroup = select.attr('id') + "Group"; var label = $("<label />"); container.append(label); $("<input type='radio' name='" + radioGroup + "' />") .attr("value", $(this).val()) //.click((function () { select.val($(this).val()); })) //radio updates select - see optional below .appendTo(label); $("<span>" + $(this).val() + "</span>").appendTo(label); }); //http://stackoverflow.com/questions/4957207/how-to-check-uncheck-radio-button-on-click //optional - this logic handles unchecking when clicking on an already checked radio container.find(":radio + span").mousedown( function (e) { var $span = $(this); var $radio = $($span.prev()); if ($radio.is(':checked')) { var uncheck = function() { setTimeout(function () { $radio.prop('checked', false); }, 0); }; var unbind = function() { $span.unbind('mouseup', up); }; var up = function() { uncheck(); unbind(); }; $span.bind('mouseup', up); $span.one('mouseout', unbind); } else { select.val($radio.val()); } } ); select.change((function () { //select updates radio $("input[name='" + select.attr('id') + "Group" + "'][value='" + this.value + "']").prop("checked", true); })); }); }); </script> </head> <body> <select class="radioSelect" id="sizeOptions"> <option value="S">S</option> <option value="M">M</option> <option value="L">L</option> <option value="XL">XL</option> <option value="2XL">2XL</option> <option value="3XL">3XL</option> <option value="4XL">4XL</option> <option value="5XL">5XL</option> </select> </body> </html>
1 answers
solution1
2 ACCPTED 2016-12-19 09:13:38
Put <script src="https://code.jquery.com/jquery-3.1.0.js"></script> before any <script> tag that uses the variable called $ .
This code snippet will allow you to use $ (which is used for jQuery in your code sample)!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.