gistfile1.txt

Attention, manque encore, coté JS, la gestion du focus pour la nav clavier, 
et peut être d'autres trucs :)


HTML :

<span class="combo-box" tabindex="0" role="listbox">
    <span class="default-action">Sélectionner...</span>
		<i aria-hidden="true" class="ico-arrow-down"></i>
    <select>
      ....
    </select>
</span>




JS (jquery) :


  //initialisation
  var jComboBox = jCont.find(".combo-box select");

  jComboBox.each(function (index) {
    updateCombo.call(this);
  });

  //gestion du onChange (en mode délégation d'évènements)
  jCont.on('change.selectbox', '.combo-box select', function () {
    updateCombo.call(this);
  });

  function updateCombo() {
    var jCurrentSelect = $(this);
    var jOptionSelected = jCurrentSelect.find('option:selected');

    var jComboBox = jCurrentSelect.closest(".combo-box");
    var jDefaultAction = jComboBox.find(".default-action");
    var jDisplaySelected = jComboBox.find(".display-current");

    if (jOptionSelected.attr('value') !== "") {

      jDefaultAction.hide();

      if (jDisplaySelected.size() === 0) {
        //si pas d'action par défaut, on la crée
        jDisplaySelected = jQuery("<span class='display-current'>");
        jDisplaySelected.text(jOptionSelected.text());
        jComboBox.prepend(jDisplaySelected);
      } else {
        jDisplaySelected.text(jOptionSelected.text());
        jDisplaySelected.show();
      }
    } else {
      jDefaultAction.text(jOptionSelected.text());
      jDefaultAction.show();
      jDisplaySelected.hide();
    }
  }