小心使用select的length属性

本文主要讲述两点: 1.select在只有一个和多个的时候length代表的意义是不一样的 2.怎么让length具有唯一的意义. 先让我们看两个例子 例1: <p> <select size=1 name=D1> <option>sfdsf</option> <option>ghjgfhfg</option> <option>qwewqe</option> </select> </p> <p> <button name=B3 οnclick=alert(D1.length)>click me</button> </p>

例2: <p> <select size=1 name=D1> <option>sfdsf</option> <option>ghjgfhfg</option> <option>qwewqe</option> </select> <select size=1 name=D1> <option>sfdsf</option> <option>ghjgfhfg</option> <option>qwewqe</option> </select></p> <p> <button name=B3 οnclick=alert(D1.length)>click me</button></p> 点击例1和例2的两个button,alert出来两个不同的结果:例1是3,例2是2,同样是D1.length,为什么不一样? 这个就是我要说的: 1.length代表的意义不一样. 在select只有一个的时候,它的length表示的是它的option的个数 在select有多个的时候,它的length表示的是select数组的长度 2.怎么让它有唯一性? 还是上面的两个例子,我们稍做改动: 例1: <p><select size=1 name=D1> <option>sfdsf</option> <option>ghjgfhfg</option> <option>qwewqe</option> </select><p> <p><button name=B3 οnclick=alert(document.getElementsByName(D1).length)>click me</button></p> 例2: <p><select size=1 name=D1> <option>sfdsf</option> <option>ghjgfhfg</option> <option>qwewqe</option> </select><select size=1 name=D1> <option>sfdsf</option> <option>ghjgfhfg</option> <option>qwewqe</option> </select></p> <p><button name=B3 οnclick=alert(document.getElementsByName(D1).length)>click me</button></p>  现在我们再试着点击看看,是不是length都指向了select的长度? 那么怎么取option的数量? 这么写: oEle = document.getElementsByName(D1) optionsCount = oEle[0].options.length 结论: 当我们无法预期同名或同ID的select的个数的时候,我们用 document.getElementsByName().length方法来获取select的length.