Tree 構成の値リストから値を選択する

jQuery

Tree 制御プラグイン

(function($j){
	var dropdown = function(idx, targets, config){
		var o = this, c = o.config = $j.extend({
			csrTree : null,
			selectNode: null,
			toggle: false,
			onInit: function(){},
			onSelect: function(){}
		}, config);
		c.target = targets.eq(idx);
		c.target.bind('click', function(evt){
			var elem = $j(evt.target);
			if(elem.attr('tagName') == 'A'){
				var next = elem.next();
				if(next.attr('tagName') == 'UL'){
					if(next.is(':hidden')){
						if(c.toggle && c.csrTree ) c.csrTree.hide();
						c.csrTree = next;
						next.show();
					}
					else{
						next.hide();
					}
				}
				else{
					c.selectNode = elem;
					c.onSelect(idx,o);
				}
			}
		});
		c.onInit(idx, o);
	}
	$j.extend(dropdown.prototype,{
		setOnSelect : function(f){
			this.config.onSelect = f;
		},
		getSelectNode : function(){
			return this.config.selectNode;
		},
		allClose : function(){
			this.config.target.find('> li > ul').hide();
			return this;
		}
	});
	$j.fn.dropdown = function(config){
		var targets = this;
		targets.each(function(idx){
			new dropdown(idx,targets,config);
		});
	}
})(jQuery);

値リストの制御

jQuery(function($){
	var ddObj;
	$('ul.dropdown').dropdown({
		toggle : true,
		onInit : function(idx,obj){
			ddObj = obj;
		}
	});
	$('input').each(function(idx){
		$(this).focus(function(){
			$('#lov').show();
			var input = $(this);
			ddObj
				.allClose()
				.setOnSelect(function(idx,obj){
					input.val(obj.getSelectNode().text());
					$('#lov').hide();
				})
		});
	})
});

html

	<body>
		<input/>
		<input/>
		<div id="lov">
			<span class="lov-title">Ttitle</span>
			<ul class="dropdown">
				<li>
					<a href="javascript:void(0)">CAT1</a>
					<ul>
						<li><a href="javascript:void(0)">CAT1-1</a></li>
						<li><a href="javascript:void(0)">CAT1-2</a></li>
						<li><a href="javascript:void(0)">CAT1-3</a></li>
						<li><a href="javascript:void(0)">CAT1-4</a></li>
					</ul>
				</li>
				<li>
					<a href="javascript:void(0)">CAT2</a>
					<ul>
						<li><a href="javascript:void(0)">CAT2-1</a></li>
						<li><a href="javascript:void(0)">CAT2-2</a></li>
						<li><a href="javascript:void(0)">CAT2-3</a></li>
						<li><a href="javascript:void(0)">CAT2-4</a></li>
					</ul>
				</li>
		
			</ul>
		</div>

	</body>