1
Ich versuche ein JSFiddle-Beispiel zu erstellen, das ein Dropdown-Menü in ein Optionsfeld umgewandelt hat. Hier ist der Link, den ich bin auf: linkVersuch, JSFiddle-Beispiel zu implementieren
Nach dem Erstellen einer HTML-Datei, binde ich die CSS und Javascript im Header des HTML-Dokuments. Danach ging ich zu sehen, ob es funktioniert hat und es scheint nicht zu haben. Hier ist der Code, den ich derzeit haben:
<!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>
\t \t \t \t
\t \t \t \t \t \t
</body>
</html>
jquery Bibliothek zu Ihrem Kopf hinzufügen –