Wie kann ich meinem benutzerdefinierten Element eine Eigenschaft hinzufügen und in der Lage sein, eine Aktion auf die Wertänderung auszulösen

Question

Tatsächlich deckt der Titel nicht vollständig ab, wonach ich suche. Ich habe mein eigenes Auswahlelement erstellt. Es besteht aus einigen div, ul/li und versteckten Eingabeelementen. Es hat natürlich den Markup- und Javascript-Teil. Hier ist der 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> 

Der Javascript-Code ist nur ein Bündel von Funktionen, die Ereignisse wie klicken, schweben, keyup usw. und sind verpflichtet, zu den obigen Elementen (nach Klasse) auf bereite Methode fangen. Ich habe keinen Typ für diese benutzerdefinierte Auswahl angegeben.

Bei einem normalen DOM-select-Elemente Ich bin in der Lage, dies zu tun:

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

Jetzt würde ich das etwas ähnliches erreichen mag. Ich kann das Wrapper div nach ID oder Klassennamen finden. Aber kann ich etwas so machen?

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

Also irgendwie, ich brauche eine Eigenschaft meine Gewohnheit hinzufügen auswählen und deren Änderung fängt den selelcted Wert auf das entsprechenden li Element einzustellen.

Answer 1

um das gleiche Verhalten wie das select-Element zu erhalten, das Sie das Element möglicherweise wie in einer normalen Klasse erweitern möchten. Verwende vielleicht eine Bibliothek wie Polymer, github.com/richardanaya/webblock oder github.com/SaulDoesCode/Crafter.js, um dein benutzerdefiniertes Element auf diese Weise zu gestalten.

Andernfalls sollten Sie Getter und Setter manuell implementieren.
Sie müssten Object.defineProperty verwenden, um ein solches benutzerdefiniertes Verhalten mithilfe von Getter und Setter für Elemente zu erstellen.

hier ist eine nette kleine Funktion, dass einfacher

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

natürlich zu machen, wie durch eine andere Antwort erwähnt, um die gewünschte Wirkung auf die Elemente in der benutzerdefinierten Auswahlliste zu bekommen vielleicht en Eventlistener befestigen.

Beachten Sie, dass die Eigenschaft "selectedIndex" für das Elternelement definiert wurde. Sie können also Listener hinzufügen, die das Elternelement aktualisieren.

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

Answer 2

Ich fürchte, .selectedIndex funktioniert nur mit dem <select> Element. Wenn Sie wirklich mit etwas ähnliches arbeiten wollen, versuchen

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

Verwenden .delegate statt .live wenn Sie jQuery verwenden 1.9+, wie es ist veraltet.