着急想要解决办法的朋友可以直接看最后的内容:}
一般我们使用select标签时大概都会使用到option标签来填充下拉框中的内容
只有几个固定的内容写死在页面还好,可能是这样的:
<select name="type"type="text">
<option velue= "">type</option>
<option value="1">type1</option>
<option value="2">type2</option>
<option value="3">type3</option>
<option value="4">type4</option>
<option value="5">type5</option>
</select>
或者动态的从ajax返回值的方式去控制option的各种值,但支持动态取值的功能只有在jsp页面才会用到,那不是本篇博客的主题,所以就先不谈了(其实就是偷懒…………)
那么如果你既需要动态的获取又需要下拉框怎么办?
一开始可能会觉得select实现不了这样的功能,因为select不能通过表达式去控制velue的值。而input倒是可以控制,但value的值会直接显示出来。这可能让你头疼致死
select标签的效果这样说可能不太好理解
代码:
酱紫写的结果:
取值并没有发生任何改变,咱们再开控制台看看:
有没有怀疑人生?
这是为什么呢?脑海里各种黑人问号………………
通过表达式去修改也不行,比如这种:
$('#type').selected(true);
或者这种:
$('#type').selected(selected);
图我就不贴了,太占地方。大家只要知道实现不了就行了…………不过看到这篇博客的你很有可能已经试过了
那么问题来了,怎么样才能再html中自由自在的修改select标签默认的option选中内容呢?原理大家基本都懂,我就直接上代码了:
html:
<select id="type" name="type"type="text" > <option id ="type1"value="1">1</option> <option id ="type2" value="2">2</option> <option id ="type3" value="3">3</option> <option id ="type4" value="4">4</option> <option id ="type5" value="5">5</option> </select> <input type="hidden" id="typev" value="$!{list.type}"/>
javascript:
//控制轮播类型的初始选中值 str = document.getElementById("typev").value; obj = document.getElementById("type"); for(i=0;i<obj.length;i++){ if(obj[i].value==str) obj[i].selected = true; }酱紫就能取到了~