jQuery中二級聯動遍歷數據更改。

實在想不到更好的標題，不知道該如何介紹這個功能。


實在點，直接上圖，上代碼吧。

如圖，紅框中的數據都是遍歷出來的，包括第二級城市列表。

這裏主要說的是，若是更改山西省，對應後面的城市列表更改，可是不能影響到上面的城市列表，也就是說，雖然數據是遍歷的，可是又相對獨立。

HTML/PHP代碼：

<?php foreach( (array) $ownerCommunityList as $key => $val ): ?>
<li>
<span style="white-space:pre">	</span><select name="province_id" class="provinceList">
	<option value="">-請選擇省份-</option>
	<?php foreach ((array) $provinceList as $provinceKey => $provinceVal): ?>
		<option <?php
			if( $val['province_id'] == $provinceKey )
			{
				echo "selected";
			}
		?> value="<?php echo $provinceKey; ?>"><?php echo $provinceVal; ?></option>
	<?php endforeach; ?>
	</select>
	<select style="width:102px;" name="region_id" class="cityList">
	<span style="white-space:pre">	</span><option value="">-請選擇城市-</option>
	<span style="white-space:pre">	</span><?php foreach( (array) $val['city_list'] as $cityKey => $cityVal ): ?>
		<span style="white-space:pre">	</span><option value="<?php echo $cityKey; ?>"><?php echo $cityVal; ?></option>
	<span style="white-space:pre">	</span><?php endforeach; ?>
	</select>
	<input type="text" name="community_name" id="communityName" value="<?php echo $val['audit_name']; ?>"/>
	<?php if( $ownerInfo -> owner_cid == $val['owner_cid'] ): ?>
	<span style="white-space:pre">	</span><span style="color:red;" name="main_community">主</span>
	<?php else : ?>
		<a href="javascript:;" style="color:#008FD7;" id="setMainCommunity">設置主小區</a>
	<?php endif; ?>
	<a href="javascript:;" style="color:#008FD7;" id="addCommunityHtml">添加</a> 
	<a href="javascript:;" style="color:#008FD7;" id="delCommunity">刪除</a>
</li>
<?php endforeach; ?>

JS代碼：

$('.provinceList').bind('change', function(){
var provinceId = $(this).val();
var obj = $(this);
$.post('/yuyue/ajaxCityList', {'provinceId':provinceId}, function(list){
var data = eval( '(' + list + ')' );
	if( data . status == 0 )
	{
		var html = '<option value="">-請選擇城市-</option>';
		for ( var i=0; i < data . list . length; i++ )
		{
			html += '<option value="'+ data . list[i] . region_id +'">' + data . list[i] . region_name + '</option>';
		}
		obj.parent().find("select[name='region_id']").html(html);
	}
});

要標出當前省級select下的城市select改變，就得須要用this，可是在post傳值以後，this就發生了改變，因此，須要在post傳值以前定義一下，才能繼續使用。