dl dt dd如何做下拉问题。

 <dl class="yl_select">
    <dt>下拉</dt>
    <dd>
        <ul>
            <li>
                <div class="yl_province">江西省</div>
                <ul>
                    <li class="yl_city">
                        <span><i></i>南昌市</span>
                        <ul style="">
                            <li class="yl_area">高新区</li>
                            <li class="yl_area">新建区</li>
                            <li class="yl_area">青山湖区</li>
                        </ul>
                    </li>
                    <li class="yl_city"><span><i></i>抚州市</span></li>
                    <li class="yl_city"><span><i></i>赣州市</span></li>
                </ul>
            </li>
        </ul>
    </dd>
</dl>

出来的样式是这样的：

把他做成下拉列表的，用来查询，然后我应该怎么做他才能选中值然后绑定到那个dt框中？

  $(function(){  
        $("dl  dd").hide();  
        $("dt").click(function(){  
            if ($(this).attr("state")=="show") {  
                $(this).nextUntil("dt").hide(500)  
                $(this).attr("state","hide");  
            }else{  
                $(this).nextUntil("dt").show(500);  
                $(this).attr("state","show");  
            }  
        });  
    }); 

function hide($node) {
$node.css("display", "none")
}
function show($node) {

$node.css("display", "block")
}
$(".yl_province,.yl_city span:first").click(
function (event) {
event.stopPropagation();
if ($(this).next().css("display") == "none") {
show($(this).next())
}
else {
hide($(this).next())
}
})
$(".yl_area").click(
function (event) {
event.stopPropagation();
$(".yl_select>dt").html($(this).text());
})

写JS代码，将

标签里面的innerHTML 赋值给dt标签的innerHTML，其实为啥不用标签做下拉菜单呢？