Come posso aggiungere una proprietà al mio elemento personalizzato ed essere in grado di eseguire un'azione sul suo cambio di valore

Question

In realtà il titolo non copre completamente ciò che sto cercando. Ho creato il mio elemento select. È composto da alcuni elementi di input div, ul/li e hidden. Ovviamente ha la parte markup e javascript. Ecco il codice html:

<div id="ddlCars" class="ma-select" style="width:350px;"> 
     <div class="ma-select-box"><input class="ma-select-box-filter" type="text"></div> 
     <div class="ma-select-options"> 
      <ul class="ma-select-ul"> 
       <li class="ma-select-li ma-visible-option" optvalue="7">MERCEDES</li> 
       <li class="ma-select-li ma-visible-option" optvalue="10">BMW</li> 
       <li class="ma-select-li ma-visible-option" optvalue="14">AUDI</li> 
       <li class="ma-select-li ma-visible-option" optvalue="3">VOLKSWAGEN</li> 
      </ul> 
     </div> 
     <input class="ma-select-hidden" type="hidden"> 
    </div> 

Il codice JavaScript è solo un mucchio di funzioni che catturano gli eventi come clic, hover, keyup ecc e sono legati agli elementi di cui sopra (per classe) su metodo pronto. Non ho dichiarato alcun tipo per questa selezione personalizzata.

Con un elemento di selezione normale DOM sono in grado di fare questo:

document.getElementById("mySelect").selectedIndex=0; 

ora vorrei per ottenere il qualcosa di simile. Posso trovare il div wrapper per ID o nome della classe. Ma c'è un modo in cui posso fare qualcosa di simile?

$('#ddlCars').selectedIndex=1; 

Così in qualche modo, ho bisogno di aggiungere una proprietà da mia abitudine selezionare e catturare la sua modifica per impostare il valore selelcted all'elemento li corrispondente.

Answer 1

per ottenere lo stesso comportamento dell'elemento select che si potrebbe voler estendere come in una normale classe. forse usa una libreria come Polymer, github.com/richardanaya/webblock o github.com/SaulDoesCode/Crafter.js per progettare il tuo elemento personalizzato in questo modo.

Altrimenti se lo si implementa manualmente, usare getter e setter.
Dovresti utilizzare Object.defineProperty per creare un comportamento personalizzato utilizzando getter e setter sugli elementi.

qui è un po 'la funzione nifty per rendere più facile che

function newGetSet(element ,key, get, set) { 
     Object.defineProperty(element, key, { 
      set: set, 
      get: get 
     }); 
    } 
    // then use it - just a rough example 
    newGetSet(myElement , 'selectedIndex' , index => { 
     // perhaps then apply a class or something to make it active 
     document.querySelectorAll('ul > li')[index].classList.add('active'); 
    },() => { 
     let active_index = 0; 
     Array.from(document.querySelectorAll('ul > li')).forEach((item,index) => { 
      if(item.classList.contains('active')) active_index = index; 
     }); 
     return active_index; 
    }); 

, naturalmente, come menzionato da un'altra risposta, per ottenere l'effetto desiderato sulle voci nella lista personalizzata selezionare forse collegare en EventListener.

quindi considera che la proprietà "selectedIndex" è stata definita sull'elemento padre, quindi potresti semplicemente aggiungere ascoltatori che aggiornerebbero il genitore.

[...document.querySelectorAll('ul > li')].forEach((item,index) => { 
    item.addEventListener('click',evt => { 
     item.parentNode.selectedIndex = index; 
    }); 
}); 

Answer 2

I am fear .selectedIndex funziona solo con l'elemento <select>. Se si vuole veramente lavorare con qualcosa di simile, provare

$('ul li').live('click', function() 
{ 
    var index = $(this).index(); 
}); 

Uso .delegate invece di .live se si utilizza jQuery 1.9+ come è stato deprecato.