Question

两个select级联,第一个select是标题第二个是内容,这里还有第三个select,在第二个处可以选择左右移动

第二个可以左右移动到第三框个里面,此时第一个select里面的内容作为标题存在在第三个框里面,点击的第二个select在会跟在后面,并且在第二个里面的内容消失,第一个的还在,并且在第三个可以上下移动,点击原来属于第二个select内容会上下移动,点击第一级的大标题的会带着属于自己标题下的内容整体移动,怎么用Jqeury实现!

Answer 1

<!-- 徐士刚jquery实现异步三级联动 -->
<script type="text/javascript">
var flagflag = false;
$(function(){
$.post("dropdownlist!selectAllProvinceCityTown.action",function(data){
var json=eval(data);
for(var i = 0,len = json.length; i<len; i++){
if($==json[i].id){
$('#cityid').empty();
$('#cityid').append("<option value=\"\">---请选择---</option>");
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
$('#provinceid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
querycitybyprovince();

}

else
{
$('#provinceid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
}
}
},"json");

$('#provinceid').change(function(){
$('#cityid').empty();
$('#cityid').append("<option value=\"\">---请选择---</option>");
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
querycitybyprovince();
});
});
function querycitybyprovince()
{
var provinceid = document.getElementById('provinceid').value;
if(provinceid==1)
{
provinceid = -1;
}
$.post("dropdownlist!selectAllProvinceCityTown.action",,function(data){

var json=eval(data);

for(var i = 0,len = json.length; i<len; i++){
if($==json[i].id){
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
$('#cityid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
querytownbycity();

}
else{
$('#cityid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
}
}

$('#cityid').change(function(){
//clearOptions(document.getElementById('townid'));
//$('#townid').empty();
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
querytownbycity();
},"json");
});
}

function querytownbycity()
{

var cityid = document.getElementById('cityid').value
$.post("dropdownlist!selectAllProvinceCityTown.action",,function(data){

var json=eval(data);
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
for(var i = 0,len = json.length; i<len; i++){
if($==json[i].id){
$('#townid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
}
else{
$('#townid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
}
}

},"json");
}

页面端：
<select name="provinceid" class="bk_01" id="provinceid"
style="WIDTH: 120px">
<option value="1">
---请选择---
</option>
</select>
<select name="cityid" class="bk_01" id="cityid"
style="WIDTH: 120px">
<option value="">
---请选择---
</option>
</select>
<select name="townid" class="bk_01" id="townid"
style="WIDTH: 120px">
<option value="">
---请选择---
</option>
</select>
希望对你有帮助，希望及时采纳，谢谢！

追问

不是三级联动,是前面两个联动,然后第二个的内容可以向右移动到第三个或者向左回来,向右移动的时候会把相应的第一个select的标题移动到第三个,这个标题为第一个select的内容,即第一个联动时候选择的,但是移动的时候第一个里面的内容不会消失,第二个select里面的内容会"真"的移动到第三个里面!在第三个里面第一个内容为标题,第二个的select选中的移动到第三个里面的会在相应的第一个内容标题下!并且在第三个里面可以上下移动!