数据绑定与异步选择

the code under this line is one of my grduation design:

please remember to use a jquery.js

 1<script type="text/javascript">
 2    var lstColumns = ['a','b','c','d'];
 3    $(document).ready(function() {
 4        var selectIndex = 1;
 5        $('.Column').each(function(a, b) {  
 6        
 7            b.options[b.length] = getOption('请选择', '');
 8            
 9            for(var i = 0; i< lstColumns.length; i++) {
10                b.options[b.length] = getOption(lstColumns[i], lstColumns[i]);
11            }
12            
13            $(b).focus(function() {
14                $(this).attr('oldvalue', $(this).attr('value'));
15            });
16            
17            $(b).change(function() { 
18                changeOption(this, $(this).attr('value') , $(this).attr('oldvalue')); 
19                $(this).attr('oldvalue', $(this).attr('value'));
20            }); 
21            
22            
23            
24        }); 
25    });
26    
27    function changeOption(obj, newvalue, oldvalue) {
28        $('.Column').each(function(a, b) {  
29            if(b != obj) { 
30                var index = getOptionIndex(b, newvalue); 
31                if(index != -1) {
32                    b.remove(index);
33                } 
34                if(oldvalue) {
35                    b.options[b.length] = getOption(oldvalue, oldvalue); 
36                } 
37            }
38        });
39    }
40    
41    function getOptionIndex(obj, val) { 
42        for(var i = 0; i < obj.length; i++) { 
43            if(obj.options[i].value == val)
44                return i;
45        }
46        return -1;
47    }
48    //获取选项
49    function getOption(key, value) {
50        var obj = document.createElement('option');
51        obj.text = key;
52        obj.value = value;
53        return obj;
54    }
55    
56</script>
57

html code:

<form action="/Admin/ImportExcel/" method="post">
                <ul>
                 <li class="t">学号</li>
                 <li><select class="Column" id="UserName" name="UserName"></select></li>
                </ul> 
                <ul>
                 <li class="t">真实姓名</li>
                 <li><select class="Column" name="NickName"></select></li>
                </ul>  
                <ul>
                 <li class="t">身份证号</li>
                 <li><select class="Column" name="IdentityMark"></select></li>
                </ul>  
                <ul>
                 <li class="t">考生号</li>
                 <li><select class="Column" name="ExamineeMark"></select></li>
                </ul>
                <ul>
                 <li class="t">录取通知书编号</li>
                 <li><select class="Column" name="MatriculateMark"></select></li>
                </ul>  
                <ul>
                 <li class="t">民族</li>
                 <li><select class="Column" name="Nationality"></select></li>
                </ul>  
                <ul>
                 <li class="t">政治面貌</li>
                 <li><select class="Column" name="PolityVisage"></select></li>
                </ul>
                <ul>
                 <li class="t">家庭地址</li>
                 <li><select class="Column" name="HomeAddress"></select></li>
                </ul>  
                <ul>
                 <li class="t">邮政编码</li>
                 <li><select class="Column" name="PostalCode"></select></li>
                </ul>  
                <ul>
                 <li class="t">家庭电话</li>
                 <li><select class="Column" name="HomeTel"></select></li>
                </ul>
                <ul>
                 <li class="t">移动电话</li>
                 <li><select class="Column" name="CellTel"></select></li>
                </ul>  
                <ul>
                 <li class="t">生源地</li>
                 <li><select class="Column" name="BornFrom"></select></li>
                </ul>  
                <ul>
                 <li class="t">生日</li>
                 <li><select class="Column" name="Birthday"></select></li>
                </ul> 
                <ul>
                 <li class="t">入学时间</li>
                 <li><select class="Column" name="EntranceTime"></select></li>
                </ul>  
                <ul>
                 <li class="t">毕业时间</li>
                 <li><select class="Column" name="GraduateTime"></select></li>
                </ul>
                <ul>
                    <li class="align_center">
                        <input type="submit" value="  保    存  " />
                        <input type="button" value="  返    回  " onclick="window.location.href='/Admin/ShowLoader/'" />
                    </li>
                </ul>
                </form>