html的下拉框的问题。

Question

是这样的。有两个下拉框。这两个下拉框的值是一样的。假设有10个值（0~9）按照从小到大排列其中第一个下拉框的 ID= A1   NAME=A1,第二个下拉框  ID = B1  NAME = B1
选择第一个下拉框的时候，选择某一个值之后，第二个下拉框的值默认变成第一个下拉框的值，而且第二个下拉框的值只可以选择 之后的三个值。
举两个例子
eg1：第一个选择了4。第二个下拉框变为4，而且第二个下拉框的内容变为5、6、7。
eg2：第一个选择了1。第二个下拉框变为1,第二个下拉框可以选择的值只有2、3、4。
不管怎样，先感谢大佬们的帮忙。

Answer 1

<hr/> <select id="status1"> <option value="0">A0</option> <option value="1">A1</option> <option value="2">A2</option> <option value="3">A3</option> <option value="4">A4</option> <option value="5">A5</option> <option value="6">A6</option> <option value="7">A7</option> <option value="8">A8</option> <option value="9">A9</option> </select> <select id="status2"> <option value="0">B0</option> <option value="1">B1</option> <option value="2">B2</option> <option value="3">B3</option> <option value="4">B4</option> <option value="5">B5</option> <option value="6">B6</option> <option value="7">B7</option> <option value="8">B8</option> <option value="9">B9</option> </select><script type="text/javascript"> $("select#status1").change(function(){ var status1 = $(this).val();//得到第一个下拉框的value值 var status2 = parseInt(status1)+1;//将字符串转为数字并进行＋1操作 var status3 = status2+1;//+2 console.log(status1,status2,status3);       //进行字符串拼接       var text1 = "B"+status1;       var text2 = "B"+status2;       var text3 = "B"+status3;       console.log(text1,text2,text3);       $("#status2").empty();//清空第二个下拉框             //根据status1判断,避免第二个下拉框中出现违规值       if(status1 <= 7){       //将得到的文本值分别放入第二个下拉框中       var option1 = $("<option>").val(1).text(text1);        $("#status2").append(option1);       var option2 = $("<option>").val(1).text(text2);       $("#status2").append(option2);       var option3 = $("<option>").val(1).text(text3);        $("#status2").append(option3);       }else if(status1 == 8){       var option1 = $("<option>").val(1).text(text1);        $("#status2").append(option1);       var option2 = $("<option>").val(1).text(text2);       $("#status2").append(option2);       }else if(status1 == 9){       var option1 = $("<option>").val(1).text(text1);        $("#status2").append(option1);       }   }); </script>根据楼主的要求自己写了一个小demo,亲测可以达到楼主所述目标.

Answer 2

BWCOAGJLELDJVXUXUXOWOXSMJMJQYHMVAXDDQOHGMZCFIVRXWBEBGZRMSUPMPSPONMYQXGTRZEXJPVBVRJRGFRUTPPWLXJUELDDEJZFHVIICMLLWPPYCPBTVHTZMMZCXZHTDGORNMCROOSUSKSFXQDGGTEZVNZJIVJBWLNJFSCZVASYXKGKGFJJEXGNKFBPBQZSZMVNJBBRUURRAEUMEBREEIGIQTZWJMAIHTZINDXQLWFROXEEAVUWIVILLUSUGSCVYOPRXZWSRUXTOSBWQGJWNBAWYSBYBDOQGOBEVZYNDPRXRFPWBHNTGAYIKMBOUQNRSFXZSMJMBKSQNLRGKXUJOXCYLEBKIAVONQHKNONPFVSMQKJEJVUKNHARZYUWTMDWWJLNICIFPWHBTYLVILRWRQCPSHEQUGQMZWZSINFXTWTWRXBHTLIVSVLRUFLVBVRIWYAZMOVOWRYQWZMPMMDZOADAPAGYDJMZJJWFNYBJQZTDIDVXMQHUBYWPPFBNBLGLZHNGNGGVNZBKXDNTNMJGXRVPZMHQZVYBRDOJUUXAEBUAPRWAUQKAWIYGEADAAZUGLERUXKFUWYDXQXKGLWZZZTWZCNJEDGNADVJZIUHMPPNFRLMIZMVCXZRCIVIFJEKTCFSVLAVRHNKKXDITVOJJWJJKEHOAWQTQQBGJYYREBUCUJIMLZVVJSUQTORUODDZRKNKNIAKQPVMJXJOGLECPSFGYQSHHXUGPUMIQKXCZCXCLXUXUKIJCMBOBYBNURNCWPWPRZZLXTQTVLGVXPIZJGGIXCOLOVGWMFSKXKNDEJYKJMGTPSAIVOBBOHRGWFXAKXKXLHMOPOSVRQTFAXAKXRFSUGCPCFHYATVQNNNJEGVEKXERWKWIHUKEUAUDSYBOPLIDFVXKNUQNPPOJBSBBTVUWADKHXHMYNGWJDGHDIKWGWQDHNZLFWPMMFKYNZJFSWAPXEATJWJMNNWSVVYSGEOXZVZVFHVFZRYLRLIRQSYBBVEVRAWTNKYVUVXQNJBORLEAPYEILROCUDVLYIYRWYRWZCPMOMFJECZDZAEWIYUXHOFQKZVEBKRNLQTOBVIBGUMOKXRUYZTVRNQDWZKCPEDTNZVSGSUDQWTGXZEGPQCFTDRXPYVVSBLZPXGWWPFQFRZPITXKGUWFURRBTJNFBDNDIBGUGKWQVILJYJMBOXANFQJLDGXGTAVHJLOHOHJEGSHEBOKMUWCLVSLLPRMIAUANAFKCSHHKHEZXWLHRHKXJEPSNAUXFRANIRFPLILACMRYJMPCGPVXQANHUMODFIFSVODYUWWTGPXMHTVCCIMHAPNNJMPPLJPRANGGGOWIKJPJCNSXWYDXUZMTRTZEJMTZTVLHZMZFPOSRHPWZFZPXMLGKPVMIZFHJTHKANIAWYBDKRNBDSLVIVFWHNZPJFZCYFHBAXDANBLKMILFFOKYXDLERJJDIXWIEREMPDFUMPPCTLMOQMPIVSNRTIEYORZYAFHGTWWPUHZCUKLBUUMEGMFMZMPJFUGNADJYGLKJGBIVMQMUQXERUTUUDSCVQWRVOKDXRERSGSQGBOBXPYAZGTDJKSDPDZCPIVOGLUPMJCZNYYAMKERENYKWMGWGN

Answer 3

不过我的第二个下拉框赋值和楼主的有点不一样,道理都是相同的(主要还是我写错了...手动尴尬)