javascript代码只是一堆捕获click,hover,keyup等事件的函数,并且在ready方法上绑定到上面的元素(按类).我没有为此自定义选择声明任何类型.
使用普通的DOM select元素,我可以这样做：
document.getElementById("mySelect").selectedIndex=0;
现在我想实现类似的东西.我可以通过id或类名找到包装器div.但有没有办法可以做这样的事情？
$('#ddlCars').selectedIndex=1;
所以不知何故,我需要在我的自定义选择中添加一个属性并捕获其更改以将selelcted值设置为相应的li元素.
获得与select元素相同的行为,您可能希望像普通类一样扩展元素.也许使用像Polymer,github.com/richardanaya/webblock或github.com/SaulDoesCode/Crafter.js这样的库来设计你的自定义元素.
否则,你应该手动实现它使用getter和setter.
您必须使用Object.defineProperty来使用元素上的getter和setter创建此类自定义行为.
这是一个漂亮的小功能,使这更容易
function newGetSet(element,key,get,set) {
Object.defineProperty(element,{
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;
});
当然,正如另一个答案所提到的,为了在自定义选择列表中的项目上获得所需的效果,可以附加到EventListener.
因此,请考虑在父元素上定义属性“selectedIndex”,因此您只需添加将更新父元素的Listeners.
[...document.querySelectorAll('ul > li')].forEach((item,index) => {
item.addEventListener('click',evt => {
item.parentNode.selectedIndex = index;
});
});
