div代替select

//CSS

.menu_h,.menu_v,.menu_h li,.menu_v li {

margin: 0;
padding: 0;
line-height: 21px;
font-size: 12px;
list-style-type: none;
text-align:left;
display: inline;
}


.menu_h a {
display: block;
line-height: 17px;
text-decoration:none;
color:#807a62;
}


.menu_v a {
display: block;
line-height: 21px;
text-decoration:none;
color:#333333;
padding-left:3px;
}
.menu_h li {
float: left;
background-color: white;
}


.oneMenu {
background: url(/view/images/xjt.png) no-repeat right center;
width:82px;
margin:0;
padding-top:3px;
padding-left:3px;
}


.menu_v li {
float: none;
background-color: #white;
overflow: hidden;
}


.sub_menu_off .menu_v {
display: none;
background: white;
}


.sub_menu_on .menu_v {
display: block;
background: white;
border:1px solid #E4E9E9;
position: absolute;
    word-wrap: break-word;
    z-index: 99999;
    list-style-position: outside;
    max-height:300px;
    Overflow-y:auto;
    overflow-x: hidden;
}


.menu_v a:hover {
background: #CCC;

}


//js

$('.menu_v li').live('click',function(){
$(this).parent().parent().removeClass();
$(this).parent().parent().addClass("sub_menu_off");
$(this).parent().parent().children("a").html($(this).text());
var value = $(this).children("a").attr("value");
$(this).parent().parent().find("input[name='authType']").val(value);
});


$(".sub_menu_off").live('click',function(){
$(this).removeClass();
$(this).addClass("sub_menu_on");
$("body").bind("mousedown", {index:this}, function(e){
while (e.target != undefined && e.target != null && e.target.tagName.toUpperCase() != "BODY"){
if (e.target == e.data.index){
return false;
}
e.target = e.target.parentNode;
}
$(e.data.index).removeClass();
$(e.data.index).addClass("sub_menu_off");
$("body").unbind();
  });
});

$(".sub_menu_on").live('click',function(){
$(this).removeClass();
$(this).addClass("sub_menu_off");
});

//html

<ul class="menu_h" > 
<li class="sub_menu_off" id="topShow" > 
<input type="hidden" name="authType" value="1"/>
<a href="#" class="oneMenu" >私密(仅个人可看)</a> 
<ul class="menu_v" > 
<li ><a style="width:100%;" href="javascript:;" value="1">私密(仅个人可看)</a></li> 
<li ><a style="width:100%;" href="javascript:;" value="2">上级领导</a></li>
</ul> 
</li>
</ul>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你使用 `<div>` 和 `<ul>` 元素来代替 `<select>` 元素,可以使用自定义属性来实现传值。例如,你可以在每个 `<li>` 元素上定义一个名为 "data-value" 的自定义属性,用于保存该选项的值。然后,在选择项发生变化时,可以获取当前选中项的值,并将其存储到一个隐藏的表单字段中,以便在表单提交时将其传递给服务器。 以下是一个示例代码,用于实现基于 `<div>` 和 `<ul>` 元素的下拉菜单,并将选中项的值传递给服务器: HTML 代码: ``` <form> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 请选择一个选项 </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <ul> <li data-value="1">选项1</li> <li data-value="2">选项2</li> <li data-value="3">选项3</li> </ul> </div> </div> <input type="hidden" name="selectedValue" id="selectedValue"> <button type="submit">提交</button> </form> ``` JavaScript 代码: ``` $(document).ready(function() { $('.dropdown-menu li').on('click', function() { var selectedValue = $(this).data('value'); $('#selectedValue').val(selectedValue); $('.dropdown-toggle').text($(this).text()); }); }); ``` 在这个示例中,我们使用了 Bootstrap 框架来实现下拉菜单的样式。点击选项时,我们获取了该选项的值,并将其存储到名为 "selectedValue" 的隐藏字段中。在点击提交按钮时,该值将被传递到服务器。 注意,这只是一个示例代码,你需要根据自己的实际需求进行修改。同时,你还需要在服务器端编写代码来接收该值,并进行相应的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值