select box 选择的例子 有大用

下面是 html
<td colspan="2"><label class="lf-firlab">地区：</label>
                                        <div id="select_box" class="dss_select" style="z-index:11;">
                                            <p id="show_hx"> 请选择 </p>
                                            <ul id="list_hx" class="hidden" style="display: none;">
                                                <li> <a href="javascript:void(0);" value="1">平江区</a> </li>
                                                <li> <a href="javascript:void(0);" value="2">金阊区</a> </li>
                                                <li> <a href="javascript:void(0);" value="3">沧浪区</a> </li>
                                                <li> <a href="javascript:void(0);" value="4">工业园区</a> </li>
                                                <li> <a href="javascript:void(0);" value="5">吴中区</a> </li>
                                                <li> <a href="javascript:void(0);" value="6">虎丘区</a> </li>
                                                <li> <a href="javascript:void(0);" value="7">高新区</a> </li>
                                                <li> <a href="javascript:void(0);" value="8">相城区</a> </li>
                                                <li> <a href="javascript:void(0);" value="9">常熟</a> </li>
                                                <li> <a href="javascript:void(0);" value="10">张家港</a> </li>
                                                <li> <a href="javascript:void(0);" value="11">昆山</a> </li>
                                                <li> <a href="javascript:void(0);" value="12">吴江</a> </li>
                                                <li> <a href="javascript:void(0);" value="13">太仓</a> </li>
                                            </ul>
                                            <input type="hidden" name="diqu" id="thisdiqu" value="0">
                                        </div></td>


下面是 js
 $('#show_hx').click(function(){
        $('#list_hx').toggle();
        return false;
    });

 $('#list_hx li a').click(function(){
        $('#list_hx').hide();
        $('#show_hx').html($(this).html());
        $('#thisdiqu').val($(this).attr('value'));
        return false;
    });

$(document).click(function(event){
        var target = event.target || event.srcElement;
        var parent1 = $(target);
        var parent = $('#list_hx');
        while(parent1.length!=0 && parent1!==parent){
            parent1 = parent1.parent();
        }
        if(parent1 !== parent){
            $('#list_hx').hide();
        }
    })