js和jquery操作select很魔性,也可以说是挺麻烦的,有时候好多都不生效,经过本人的多时间尝试,总结了一些比较好用的,一下均基于jquery首先是设置select的选中项:
$("#selectId").find("option[value='val']").prop("selected", true); //设置option的属性
$("#selectId").val("text"); //直接设置select的值
- 第一种是将每个option元素都加上value属性,和他的值,这样可以通过value筛选;
- 第二种比较直接,就是将select的 值 设置为 option的text,并且也是直接选中,两个方法都不会触发select的change()方法,需要自己再写切换后的部分
$("#selectId").change() //非手动点击option无法触发
不过相对来说第二种简单些。
但是如果要获得当前选中的option的元素,则为:
$("#selectId").find("option:selected")
再加上prev()/next(),和prop(‘selected’, true),就可以实现上下临近选择。即:
$("#selectId").find("option:selected").prev().prop('selected', true); //选中上一个选项
$("#selectId").find("option:selected").next().prop('selected', true); //选中下一个选项
(注:这里使用 prop(‘selected’, true) 而不是attr(‘selected’, true),后者可能只会生效一次,目前还不知道其原因)