关于一个批量仿select的jquery代码

Question

本帖最后由 mbaun 于 2014-01-14 01:07:01 编辑

Answer 1

用插件吧~http://js.itivy.com/?p=197

Answer 2

$('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的值的。所以得放在里面。

Answer 3

直接给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>