关于一个批量仿select的jquery代码 本帖最后由 mbaun 于 2014-01-14 01:07:01 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 用插件吧~http://js.itivy.com/?p=197 $('div[id^="selects_"]').click(function() { var select_id=$(this).attr("id").split("_")[1]; $('em', this).toggleClass('down'); $('#select_'+select_id).toggle(); $("#select_"+select_id+" a").click(function(){ console.log($(this).html()); });});这样改一下试试,你的那种写法,是在点击之后才有select_id的值呢,可是绑定是在文档加载完就绑定的。而且,也有作用域的问题啊,外面是读取不到select_id的值的。所以得放在里面。 直接给dl中的a注册事件,反正你id都是又规则的,获取到dl的id反推出div的id<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><div id="select"> <div class="selects" id="selects_1"><span value="-1">-类型选择1</span><em></em></div> <dl id="select_1" style="display:none"> <dd><a href="#s1" value="1">类型一</a></dd> <dd><a href="#s2" value="2">类型二</a></dd> </dl> </div> <input type="text" name="leixing_1" id="leixing_1" value='' /></div><div id="select"> <div class="selects" id="selects_2"><span value="-1">-类型选择2</span><em></em></div> <dl id="select_2" style="display:none"> <dd><a href="#s1" value="1">类型三</a></dd> <dd><a href="#s2" value="2">类型四</a></dd> </dl> </div> <input type="text" name="leixing_2" id="leixing_2" value='' /></div><script> $(function () { $('div[id^="selects_"]').click(function () { var select_id = $(this).attr("id").split("_")[1]; $('em', this).toggleClass('down'); $('#select_' + select_id).toggle(); }); //此处写点击第一个层后的代码,目前这样写获取不到上面的select_id $('dl a').click(function () { var dl=$(this).closest('dl'),id = dl.attr('id').split('_'); var _text = $(this).text(); dl.hide(); $('#selects_' + id[1]).find('span').text(_text).end().find('em').removeClass('down'); $('#selects_' + id[1]).find('span').attr("value", $(this).attr("value")); $('#leixing_' + id[1]).attr("value", $(this).attr("value")); return false; }); });</script> 如何点击页面上一个按钮来重新刷新一棵树,求赐教、。。。 关于xmlhttp获取状态码404的判断 关于JS获取外层a 对象的问题 使用js修改text中value值得问题? 刚开始学 js,这段代码想了半天 也没看出有什么毛病! JS有排序的函数吗? opener.location.reload()时老是要弹出个对话框,喊我确认什么的,能不能不让它出? FOCUS时出错 再问个菜鸟问题,showmodaldialog的title怎样控制 JS 怎样修改才能重复使用 docment.write一个层,如何显示 请教:用JavaScript实现简单表格操作
var select_id=$(this).attr("id").split("_")[1];
$('em', this).toggleClass('down');
$('#select_'+select_id).toggle();
$("#select_"+select_id+" a").click(function(){
console.log($(this).html());
});
});这样改一下试试,你的那种写法,是在点击之后才有select_id的值呢,可是绑定是在文档加载完就绑定的。而且,也有作用域的问题啊,外面是读取不到select_id的值的。所以得放在里面。
<div id="select">
<div class="selects" id="selects_1"><span value="-1">-类型选择1</span><em></em></div>
<dl id="select_1" style="display:none">
<dd><a href="#s1" value="1">类型一</a></dd>
<dd><a href="#s2" value="2">类型二</a></dd>
</dl>
</div>
<input type="text" name="leixing_1" id="leixing_1" value='' />
</div>
<div id="select">
<div class="selects" id="selects_2"><span value="-1">-类型选择2</span><em></em></div>
<dl id="select_2" style="display:none">
<dd><a href="#s1" value="1">类型三</a></dd>
<dd><a href="#s2" value="2">类型四</a></dd>
</dl>
</div>
<input type="text" name="leixing_2" id="leixing_2" value='' />
</div>
<script>
$(function () {
$('div[id^="selects_"]').click(function () {
var select_id = $(this).attr("id").split("_")[1];
$('em', this).toggleClass('down');
$('#select_' + select_id).toggle();
});
//此处写点击第一个层后的代码,目前这样写获取不到上面的select_id $('dl a').click(function () {
var dl=$(this).closest('dl'),id = dl.attr('id').split('_');
var _text = $(this).text();
dl.hide();
$('#selects_' + id[1]).find('span').text(_text).end().find('em').removeClass('down');
$('#selects_' + id[1]).find('span').attr("value", $(this).attr("value"));
$('#leixing_' + id[1]).attr("value", $(this).attr("value"));
return false;
});
});
</script>