드롭다운 선택 입력 가능 상자
-
-
-
-
- 5
- 6
- 7
- 8
-
-
-
-
- 5
- 6
- 7
- 8
(function($){
$.fn.MySelect=function(){
this.each(function(){
var $box=$(this);
var $input=$box.find("input.my-select-input"); //
var $list=$input.next(); //ul
var inputHeight=$input.outerHeight(); // input ， ul ul
$list.css({"top":(inputHeight)});
$input.focus(function(){ // ， ul
var $nextUl=$(this).next();
if($nextUl.children().length>0){
$(this).next().show();
}
}).bind('input propertychange',function(){ //
var $this=$(this);
$this.attr("data-id","");
var curText=$this.val();
var $nextUl=$(this).next();
if($nextUl.children().length>0){
$nextUl.find("li").removeClass("choosed");
$nextUl.find("li").each(function(i,item){
var txt=$(item).text();
if(txt===curText){
var v=$(item).attr("data-value");
$this.attr("data-id",v);
$(item).addClass("choosed");
}
});
}
});
// ， li
$list.off('click', 'li').on('click', 'li', function (e) {
var $this = $(this);
var value = $this.attr("data-value") || '';
$input.val($this.text()).attr("data-id", value);
$this.addClass("choosed").siblings().removeClass("choosed");
$this.parent().hide();
});
});
$(document).click(function (e) { // .my-select-box ul
var target=e.target;
var $target=$(target);
var $parent=$target.closest('.my-select-box');
if($parent.length<1){ // .my-select-box ， ul
$(".my-select-list").hide();
}else if($parent.length==1){ // my-select-box ，
var $ul=$parent.find(".my-select-list");
var flag=$ul.is(":hidden");
$(".my-select-list").hide();
if(!flag) $ul.show();
}
});
return this;
}
})(jQuery);
$(".my-select-box").MySelect();
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
