1.
先看下一个例子:
首先是一个下拉框
<table width="50%">
<tr>
<td >选择资源类型:</td>
<td id="changeContent">HTML页面</td>
<td>
<select id="s1">
<option value="1">HTML页面</option>
<option value="2">下载资源</option>
<option value="3">超链接资源</option>
<option value="4">自测题</option>
<option value="5">课件资源</option>
<option value="6">问卷调查</option>
<option value="7">FAQ</option>
<option value="8">文本及附件</option>
</select>
</td>
</tr>
</table>
之后,通过
$(document).ready(function(){
$("#s1").change(function(){
$("#changeContent").html( $("option[value="+$(this).val()+"]").html() );
alert($("option[value="+$(this).val()+"]").html());
//alert($(this).val());
});
});
以下代码进行下拉框值的获取。
上文中的 $(this).val() 对应下拉框中的 value
而 $("option[value="+$(this).val()+"]").html() 则是对应value后的内容。
2.
$("select[id=select]").change(function(){
var newvar = $("select[id=select] option:selected").text();
$("input[id=input1]").val(newvar);
});
$("#showdiv").click(function(){
alert( "Email:"+ $("#user_name").val()+"@"+$("#input1").val() );
})
这段代码表示id为selected的下拉框改变后,会自动取得所选中的值内容,并提示出来。
3.
可以通过append方法,动态的增加下拉框中的选项.
eg:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var i=1;
$("#editlink").click(function(){
$("#selectlink").append( "<option value=/"1/">cssrain"+i+"</option>" );
i++;
});
});
</script>
<input type="button" id="editlink" value="add options" />
<div id="editlinkdiv">
<select id="selectlink" name="selectlink">
<option>add options</option>
</select>
</div>
其中,append方法直接把需要添加的内容添加至下拉框的option选项中。
4.复选框的全选择与反选择等。。。
- <mce:script type="text/javascript" src="JS/jquery.js" mce_src="JS/jquery.js"></mce:script>
- <mce:script type="text/javascript"><!--
- $(document).ready(function(){
- $("#test").click(function(){
- $("input[type*='checkbox']").each(function(i){
- if(this.checked) {
- alert(this.value);
- }
-
- });
- });
-
- $(".notcheck").click(function(){
- $("input[type=checkbox]").not("[checked]").each(function(i){
- alert(this.value);
- });
-
- });
-
- $("#form1").submit(function(){
- if($("#form1 input:checked")) {
- alert($("#form1 input:checked").val());
- }
-
-
- return false;
- });
-
- $(".btn").click(function(){
- $("#divPosType input:checked").each(function(i){
- alert($(this).val());
-
- });
- });
-
-
- $("#selectall").click(function(){
- $("input[type=checkbox]").each(function(i){
- $(this).attr("checked",true);
- });
- });
-
- $("#checkall").click(function(){
- if(this.checked) {
- $("input[type=checkbox]").each(function(i){
- $(this).attr("checked",true);
- });
- } else {
- $("input[type=checkbox]").each(function(i){
-
- $(this).attr("checked",false);
- });
- }
-
- });
-
- });
-
-
-
-
- <body>
- <input type="button" value="test" id="test">
- <input type="checkbox" id="a" checked="checked" value="1"/>1
- <input type="checkbox" id="b" checked="checked" value="2"/>2
- <input type="checkbox" id="c" value="3" onclick="alert(this.value)"/>3
-
- <input type="button" value="测试没有选中的" class="notcheck">
-
- <hr>
-
- <form id="form1">
- <input type="radio" name="items" id="item1" value="a"/>A
- <br/>
- <input type="radio" name="items" id="item2" value="b"/>B
- <br/>
- <input type="submit" id="btn1">
- </form>
-
- <hr>
-
- <input type="button" value="测试选中的" class="btn">
-
- <div class="inpblk" id="divPosType">
- <ul>
- <li><input type="checkbox" name="chkJobType" id="chkJobType1" value="1" checked/>全职</li>
- <li><input type="checkbox" name="chkJobType" id="chkJobType2" value="2" />兼职</li>
- <li><input type="checkbox" name="chkJobType" id="chkJobType3" value="3" checked />临时</li>
- <li><input type="checkbox" name="chkJobType" id="chkJobType4" value="4" checked />实习</li>
- </ul>
- </div>
-
- <input type="button" id="selectall" name="selectall" value="全部选择" />
- <input type="checkbox" id="checkall" value="1"/>全选
-
- </body>