Sélectionner Plusieurs Html avec des colonnes - possible?

Je suis en train de réaliser ce qui suit:

<select ...>
  <option>Column 1     Column 2</option>
  <option>Line 1       Data 1</option>
  <option>Line 2       Data 2</option>
  <option>Line 3       Data 3</option>
  <option>...          ...</option>
  <option>Line n       Data n</option>
</select>

Sans l'aide d'une police à largeur fixe. J'ai une option + description que je voudrais afficher pour chacune des options dans le <select multiple />.

Est-ce possible avec droit de css/html, ou dois-je chercher un plugin?

Au lieu de lutter avec la sélection, je voudrais simuler. Créer le balisage vous avez besoin et de la base de javascript sur elle. De cette façon, vous bascially créer votre propre "plugin". Sinon, vous pouvez essayer certains (juste google pour quelque chose comme "jquery personnalisée sélectionnez"). Cependant, je n'ai jamais rien vu de près ce que vous voulez. Bonne chance.
Les deux colonnes contiennent deux différence sélectionnable éléments, ou sont les deux colonnes d'une sélection unique?
une seule sélection. Je veux juste joli Option <> Description de couplage 🙂
sélectionne afficher différemment sur différents OS/navigateur combinaisons.
Comme vous pouvez le voir je viens de finir la deuxième version qui gère même plusieurs colonnes. Essayez-le et laissez-moi savoir si vous avez trouvé utile. +1 pour l'idée 😉

OriginalL'auteur SB2055 | 2014-08-08

  1. 5

    Le premier extrait de code fonctionne pour les deux colonnes, sélectionnez liste, tandis que la seconde, on peut gérer plusieurs colonnes. Point-virgule ; est utilisé comme séparateur.

    //two-column multiple select list
window.onload = function(){
  var s = document.getElementsByTagName('SELECT')[0].options, 
      l = 0, 
      d = '';
  for(i = 0; i < s.length; i++){
    if(s[i].text.length > l) l = s[i].text.length; 
  }
  for(i = 0; i < s.length; i++){
    d = '';  
    line = s[i].text.split(';');
    l1 = (l - line[0].length);
    for(j = 0; j < l1; j++){
      d += '\u00a0'; 
    }
    s[i].text = line[0] + d + line[1];
  }  
};

    De travail jsBin

    //multiple-column multiple select list
window.onload = function(){

  var s = document.getElementsByTagName('SELECT')[1].options, l = [];

  for(i = 0; i < s.length; i++){
    column = s[i].text.split(';');
    for(j = 0; j < column.length; j++){
      if(!l[j]) l[j] = 0;
      if(column[j].length > l[j]){
        l[j] = column[j].length;
      }      
    }    
  }  

  for(i = 0; i < s.length; i++){
    column = s[i].text.split(';');
    temp_line = '';
    for(j = 0; j < column.length; j++){
      t = (l[j] - column[j].length);
      d = '\u00a0';
      for(k = 0; k < t; k++){
        d += '\u00a0';
      }
      temp_line += column[j] + d;
    }
    s[i].text = temp_line;    
  }  

};

    De travail jsBin

    Très, très cool. Merci pour cela, mais j'essaie d'éviter d'utiliser une police à largeur fixe, comme courier. Est-ce possible?
    J'ai peur que cela n'est pas possible. Au moins, je ne pouvais pas y arriver 🙂 Vous pouvez utiliser Courier New, Courier, monospace ou Lucida Console, Monaco5, monospace qui a l'air plutôt sympa et neutre. Ou de toute autre monospace de polices web. Acclamations 😉

    OriginalL'auteur hex494D49

  2. 2

    Juste une approche différente - VIOLON.

    Utilisé le code de jQuery 'sélectionnable" et adaptée.

    Utilisé divs pour créer les colonnes.

    CSS

    #holder .ui-selecting {
    background: #e0e6fa;
}
#holder .ui-selected {
    background: #d1daf4;
    color: white;
}
#holder {
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 270px; }
div {
    display: inline-block;
}
li div:first-child {
    width: 100px;
    color: red;
    padding: 3px 3px 3px 10px;
}
li div:nth-child(2) {
    width: 120px;
    color: blue;
    padding: 3px 3px 3px 10px;   
}

    OriginalL'auteur TimSPQR

  3. 0

    Ce n'est pas simplement réalisables via CSS et ne serait pas compatible avec tous les navigateurs. La meilleure solution pour cela serait prépondérant de la sélectionner à l'aide de jQuery et de créer une liste déroulante sur la volée, ce qui pourrait être appelée de façon appropriée à l'aide de <span> tags ou similaire.

    OriginalL'auteur will