设置多个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>') #动态添加
});