wie kann ich <div>
oder ein <span>
-Tag in ein <option>
-Tag einfügen?
Ich möchte, dass die Zeile <option>
ist. Natürlich hat sie einen Wert und alles, aber ich muss in dieser Option einen roten Kreis neben den Text setzen.
code wie:
<option value="1">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="2">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="3">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="4">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
Es ist möglich, einen roten Kreis hinter den Text zu setzen - http://jsfiddle.net/V8cvQ/
option:after {
content: " ";
height: 5px;
width: 5px;
background: #c00;
border-radius: 5px;
display: inline-block;
}
...
UPDATE
Verschiedene farbpunkte haben
HTML
<select>
<option> select </option>
<option class="red"> one </option>
<option class="green"> two </option>
<option class="blue"> three </option>
</select>
CSS
option:after {
content: " ";
height: 5px;
width: 5px;
border-radius: 5px;
display: inline-block;
}
option.red:after { background: #c00; }
option.green:after { background: #0c0; }
option.blue:after { background: #00c; }
Nein, laut MDN ist dies erlaubt:
Zulässiger Inhalt: Text mit evtl. Escape-Zeichen (wie
é
)
Nein, nicht möglich. Oder zumindest nicht gültig.
Sie können Ihre Optionen durch JS-Plugin ersetzen:
HTML:
<h3>multiSelect = false</h3>
<div id="combo1" class="combo"></div><br>
<button id="get1">get1</button>
<button id="set1">set1</button>
JS:
$(function(){
var dd = [];
for(var i=1;i<=4; i++)
dd.Push({ code: i + '', name: 'Employee ' + i });
var cfg = {
keyField: 'code',
displayField: 'name',
multiSelect: false,
width: 200,
boxWidth: 200,
cols : [{
field: 'code', width: '30%'
},{
field: 'name', width: '70%'
}],
data: dd
};
var cfg1 = $.extend({}, cfg);
var cb1 = $('#combo1').mac('combo', cfg1);
$('#get1').click(function(){
alert(cb1.selected);
});
$('#set1').click(function(){
cb1.select(2);
});
});
Vergessen Sie nicht, externe Quellen von jsfiddle zu kopieren: Hier ist eine Geige
http://jsfiddle.net/arslantabassum/p5s4jzez/
1. copy html
2. copy javascript
3. copy external sources
Sie können dies mit dieser benutzerdefinierten Auswahleingabe tun
Referenz: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select
var x, i, j, selElmnt, a, b, c;
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
a2 = document.createElement("SPAN");
a2.setAttribute("class", "square-box");
a2.setAttribute("style", "background-color: " + selElmnt.options[selElmnt.selectedIndex].getAttribute("COLOR"));
a.appendChild(a2);
x[i].appendChild(a);
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 0; j < selElmnt.length; j++) {
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
d = document.createElement("SPAN");
d.setAttribute("class", "square-box");
d.setAttribute("style", "background-color: " + selElmnt.options[j].getAttribute("COLOR"));
c.appendChild(d);
c.addEventListener("click", function(e) {
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerText == this.innerText) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.Push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
document.addEventListener("click", closeAllSelect);
.custom-select {
position: relative;
font-family: Arial;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: DodgerBlue;
}
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
.select-items div,
.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
}
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
.select-items .square-box {
height: 18px;
width: 18px;
float: right;
}
.select-selected .square-box {
height: 18px;
width: 18px;
right: 30px;
position: absolute;
}
<div class="custom-select" style="width:200px;">
<select>
<option value="1" color="red">Audi</option>
<option value="2" color="green" selected>BMW</option>
<option value="3" color="yellow">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
</div>
Um dies zu erreichen, können Sie Folgendes versuchen: Verwenden Sie ein div, um das ausgewählte Element anzuzeigen, und fügen Sie ein div oder eine Schaltfläche wie eine Dropdown-Schaltfläche ein. Wenn Sie auf die Schaltfläche klicken, wird ein anderes Div angezeigt, das alle Ihre Optionen enthält.
Ein bisschen komplex, also nicht nötig, um diesen Effekt zu erzielen, damit er hübsch aussieht