使用input、ul模擬下拉框
阿新 • • 發佈:2019-02-03
html
<input type="hidden" name="type" id="type" class="type" value="${object.type}"/>
<div class="select_kuang">
<input type="text" onfocus="selectTog(this, '.type')" id="typename" placeholder="-請選擇-" value="${object.typename}" disabled/>
<em onclick="selectTog(this, '.type')" ></em>
<ul>
<li value="1">a</li>
<li value="2">b</li>
<li value="3">c</li>
</ul>
</div>
javascript
function selectTog(obj, cascade) {
$(obj).siblings("ul").toggle();
var input = $(obj).parent().find("input" );
var valueinput = $(obj).parent().parent().find(cascade);
$(obj).siblings("ul").children("li").bind("click", function () {
var $this = $(this);
input.attr("value", $.trim($this.text()));
if (valueinput) {
valueinput.attr("value", $this.attr("value"));
}
$this .parent().find(".selected").removeClass("selected");
$this.addClass("selected");
$this.parent().hide();
})
if (input.val() == "")
$(obj).siblings("ul").children("li.selected").removeClass("selected");
}