jquery 二级联动

Posted 2020-09-09 nono

<tr>
<td class="tdwidth">城市：</td>
<td><select id="province" name="" style="width:175px;height:26px;" onchange="fuc()" >

</select> &nbsp;
<select id="city" name="" style="width:175px;height:26px;"> 
</select> </td>

</tr>

<script type="text/javascript">
$(document).ready(function () {
htmlobj = $.ajax({ url: "../img/json.js", async: false });
$.each(jQuery.parseJSON(htmlobj.responseText), function (index, content) { 
$("#province").append($("<option value=\"" + content.name + "\">" + content.name + "</option>")); 
});
$("#city").append($("<option value=\"1\">请选择</option>"));
});
function fuc() {
htmlobj = $.ajax({ url: "../img/json.js", async: false });
$("#city").html("");
$.each(jQuery.parseJSON(htmlobj.responseText), function (index, content) {
if (content.name == $("#province").val()) {
$.each(content.sub, function (i, contex) {
$("#city").append($("<option value=\"" + contex.name + "\">" + contex.name + "</option>"));
});
}
});
} 
</script>