it-swarm.com.de

ist es möglich, <div> oder <span> innerhalb eines <option> -Tags hinzuzufügen?

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>
18
Abude

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; }

DEMO

19
Zoltan Toth

Nein, laut MDN ist dies erlaubt:

Zulässiger Inhalt: Text mit evtl. Escape-Zeichen (wie &eacute;)

18
Dave

Nein, nicht möglich. Oder zumindest nicht gültig.

5
j08691

Sie können Ihre Optionen durch JS-Plugin ersetzen:

HTML:

<h3>multiSelect = false</h3>
<div id="combo1" class="combo"></div><br>
&nbsp;&nbsp;<button id="get1">get1</button>&nbsp;
<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
0
Arslan Tabassum

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>

0
Ahmed Essawy

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

0
NSF