ajex和js获取下拉列表选中的相应文本内容

设置多个select并获取选中的options的文本内容并进行拼接动态添加到列表中，分别用js和ajex实现

html代码

    <select name="" id="pro">
        <option value="">---请选择省----</option>  #我的数据都是从数据库中获取然后动态添加的，所有这里只有一条
    </select>
    <select name="" id="city">
        <option value="">---请选择市----</option>
    </select>
    <select name="" id="dis">
        <option value="">---请选择县----</option>
    </select>
    <input type="submit" id="sub" onclick="on()">
    <ul id="d">

    </ul>

js方式

        js显示添加地址信息
        function on() {
            pro = document.getElementById('pro');#获取省份下拉框
            p = pro.options[pro.selectedIndex].text #获取选中的文本内容
            city = document.getElementById('city');  #获取市下拉框
            c = city.options[city.selectedIndex].text   #获取选中的文本内容
            dis = document.getElementById('dis')   #获取县的下拉框
            di = dis.options[dis.selectedIndex].text   #获取选中的文本内容
            str = "<li>" + p+'----'+c+'-----'+di +'</li>'   #简单拼接动态添加li
            document.getElementById('d').innerHTML += str   #添加进去
        }

{#           ajex添加选中的地址信息   #}
sub=$('#sub')#获取sub
d=$('#d')  #获取d
pro=$('#pro');
city=$('#city');
dis=$('#dis');

sub.click(function () {
    pro_id = $('#pro option:selected').text()  #获取省份选中的对应文本
    city_id = $('#city option:selected').text()  #获取市选中的对应文本
    dis_id = $('#dis option:selected').text()   #获取县选中的对应文本
    result = pro_id + '----' + city_id + '------' + dis_id  //地址拼接
    d.append('<li>'+result +'</li>')  #动态添加

});