web-dev-qa-db-fra.com

est-il possible d'ajouter <div> ou <span> à l'intérieur d'une balise <option>?

comment puis-je ajouter <div> ou une balise <span> à l'intérieur d'une balise <option>?

Je veux que la ligne soit <option> bien sûr, elle a une valeur et tout, mais je dois mettre une couleur de cercle rouge à côté du texte dans cette option, est-ce possible? 

code comme:

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

Il est possible de mettre un cercle rouge après le texte - http://jsfiddle.net/V8cvQ/

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    background: #c00;
    border-radius: 5px;
    display: inline-block;
}

...

METTRE &AGRAVE; JOUR

Pour avoir des points de couleurs différentes

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

D&EACUTE;MO

19
Zoltan Toth

Non. Selon MDN , voici ce qui est autorisé:

Contenu autorisé: texte avec des caractères éventuellement échappés (tels que &eacute;)

18
Dave

Non, pas possible. Ou pas valide du moins.

5
j08691

Vous pouvez remplacer vos options par le plugin JS:

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

});

N'oubliez pas de copier les sources externes de jsfiddle: Voici un violon

http://jsfiddle.net/arslantabassum/p5s4jzez/

1. copy html
2. copy javascript
3. copy external sources
0
Arslan Tabassum

Vous pouvez le faire en utilisant cette entrée de sélection personnalisée

Référence: 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

Pour ce faire, vous pouvez essayer ceci: Utilisez un div pour afficher l’élément sélectionné et placez-y un div ou un bouton comme un bouton déroulant. Lorsque le bouton est cliqué, il affiche un autre div contenant toutes vos options.

Un peu complexe donc pas nécessaire pour obtenir cet effet juste pour le rendre joli

0
NSF