日期:2014-05-16  浏览次数:20374 次

省市联动功能的vm+js代码 其他相关的Select联动都可以用

HTML:

?

<select class="selPro">
?? ??? ??? ??? <option value="0">请选择省份</option>
?? ??? ??? ??? ??? ?? #foreach($province in $provinceList)
?? ??? ??? ??? ??? ??? ? <option value=$province.id >$province.province</option>
?? ??? ??? ??? ??? ?? #end
</select>

<!-- 城市 -->
<select class="selCity" value="0" selected="selected" disabled="disabled"><option>请选择城市</option></select>
?? ??? ??? ??? ??? ???? #foreach($province in $provinceList)
?? ??? ??? ??? ??? ??? ??? ??? <select class="selCity" style="display:none" >
?? ??? ??? ??? ??? ??? ??? ??? ??? ?? #foreach($city in $cityList)
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ???? #if($city.provinceId==$province.id)
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? <option value="$city.id">$city.city</option>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? #end
?? ??? ??? ??? ??? ???? #end

</select>


JS:

?

/**
? * @function 省市联动功能
? */
?$(".selections .selPro").change(function(){
???? $(" .selections .selPro option").each(function(i,o){
??? ??? ?if($(this).attr("value")==0){
??? ??? ? $(" .selections .selCity").eq(0).attr("disabled","disabled");
??? ??? ?}
???????? if($(this).attr("selected"))
???????? {
??????? ??? ? $(".selections .selCity").hide();
??????? ??? ? $(".selections .selCity[selected=selected]").removeAttr("selected");
??????? ??? ? $(".selections .selCity").eq(i).show();
??????? ??? ? $(".selections .selCity").eq(i).attr("selected","selected");
???????? }
???? });
?});
?$(".selections .selPro").change();

?

?

希望对大家有帮助~