web-dev-qa-db-fra.com

Comment ajouter un bouton supprimer/supprimer pour chaque élément d'option dans html select?

J'ai besoin de créer ou d'utiliser une bibliothèque pour créer une sélection HTML personnalisée pour supprimer chaque élément de la sélection HTML. Quelque chose comme ça:

<select>
    <option value="volvo">Volvo</option> <button>delete</button>
    <option value="saab">Saab</option> <button>delete</button>
    <option value="mercedes">Mercedes</option> <button>delete</button>
    <option value="audi">Audi</option> <button>delete</button>
</select>

J'ai cherché comment faire cela et toutes les bibliothèques existantes, mais je n'ai rien trouvé. Dans IOS existe this . J'ai besoin de quelque chose comme ça, mais pour le HTML.

UPDATE: Quelque chose comme ça http://jsfiddle.net/b22ww/2/

javascriptjqueryhtmlcss
7
epool

Utilisez ceci:

<ul>
    <li><input type="radio" name="list" value="volvo">Volvo <button>delete</button></li>
    <li><input type="radio" name="list" value="saab">Saab <button>delete</button></li>
    <li><input type="radio" name="list" value="mercedes">Mercedes <button>delete</button></li>
    <li><input type="radio" name="list" value="mercedes">Mercedes <button>delete</button></li>
</ul>

Ajoutez ensuite des écouteurs d’événements à chaque bouton qui supprime le <li> parent de la liste ( Démo sur jsfiddle.net ).

7
Bergi

Ce que vous devez accomplir est tout à fait impossible avec select. Ce dont vous avez besoin est de créer quelque chose comme une listview, comme ceci:

HTML

<ul>
    <li>item one <div class='deleteMe'>X</div></li>
    <li>item two <div class='deleteMe'>X</div></li>
    <li>item three <div class='deleteMe'>X</div></li>
    ....
</ul>

et lier un gestionnaire de clics

JS 

$(".deleteMe").on("click", function(){
   $(this).closest("li").remove(); 
});

voir cet exemple

FIDDLEhttp://jsfiddle.net/zZ3mc/

3
BeNdErR

Si vous êtes prêt à utiliser les plugins jQuery, choisi vous permet de personnaliser certains éléments. Dans votre cas, consultez la section intitulée "Support sélectionné et désactivé".

2
Christophe

J'ai fait quelque chose comme ça ...

$(document).ready(function() {
  $(".deleteMe").on("click", function() {
    if (confirm('Are you sure to delete?')) {
      $(this).closest("li").remove();
    } else {
      return false
    }
    return false;
  });
  $('li').click(function(e) {
    alert($(this).text());
    $('#selected').html('<img class="trigger" src = "https://i.stack.imgur.com/LFSrX.png">' + $(this).text().trim().slice(0, -1));
    $('.dropdown-container').hide();
  });
  $(window).click(function() {
    $(".dropdown").css("border", "1px solid #444");
    $('.dropdown-container').hide();
	});
  $("#selected").on("click", function(e) {
    $(".dropdown").css("border", "1px solid orange");
    $('.dropdown-container').show();
    return false;
  });
});
  li {
    list-style: none;
    background: white;
    margin: 2px;
    padding: 5px;
  }

  .deleteMe {
    float: right;
    color: red;
  }

  .dropdown-container {
    display: block;
    position: absolute;
    border: 2px solid gray;
    padding: 5px;
    background: white;
    width: 290px;
    height: 200px;
    overflow-y: scroll;
  }

  li:hover {
    background-color: #ead6b7;
  }

  .dropdown {
    position: relative;
    border: 1px solid #444;
    border-radius: 3px;
    width: 300px;
    height:30px;
    background-color: #CCC;
    padding-top: 10px;
    padding-left: 3px;
  }
  .dropdown .trigger {
    padding-top: 10px;
    position: absolute;
    right: 0;
    top: 1px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selected" class="dropdown">
  <img class="trigger" src="https://i.stack.imgur.com/LFSrX.png"> Select Something!
</div>
<div class="dropdown-container" style="display:none">
  <li>item one selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item two selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item three selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item four selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item five selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item six selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item seven selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item eight selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item nine selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item ten selected
    <div class='deleteMe'>X</div>
  </li>
</div>

J'espère que cela aidera quelqu'un!

1
BharathRao

Ce n'est pas valide HTML. Tu ne peux pas faire ça.

Vous pouvez le faire en utilisant une sélection SIMULÉE (un groupe de HTML/JS qui se comporte comme une sélection, mais n'en est pas un)

0
Diodeus - James MacFarlane

Vous ne pouvez pas avoir le bouton dans la sélection. Une autre option consiste à le déplacer en dehors de la sélection, comme dans cette démo .

html:

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button>Delete current choice</button>

Exemple de script:

var button=document.getElementsByTagName("button")[0],
    select=document.getElementsByTagName("select")[0];
button.onclick=function(){
    select.removeChild(select.options[select.selectedIndex]);
};
0
Christophe