我试图重新创建一个JSFiddle示例，该示例将下拉菜单转换为单选按钮。这是我指的链接：
link
创建HTML文件后，我将CSS和Javascript嵌入html文档的标题中。之后，我去看看它是否有效，但似乎没有。这是我目前拥有的代码：
<!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>最佳答案
将<script src="https://code.jquery.com/jquery-3.1.0.js"></script>放在任何使用名为<script>的变量的$标记之前。
此代码段将允许您使用$（在代码示例中用于jQuery）！
关于javascript - 尝试实现JSFiddle示例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41219101/