jquery操作select下拉框:取值,赋值,删除

1.jquery对select的取值

<select id="test">  
  <option value ="1">测试1</option>  
  <option value ="2">测试2</option>  
  <option value="3" >测试3</option>  
  <option value="4" >测试4</option>  
</select>

用上面的select举例说明:

取得value: var value=$("#test").val();

取得text:    var text=$("#test").find("option:selected").text();

获取Select选择的索引值: var checkIndex=$("#test ").get(0).selectedIndex;

获取Select最大的索引值: var maxIndex=$("#test  option:last").attr("index");


2.jquery对select的赋值

jquery对select的动态赋值,动态赋值是实际项目中用的最多的,往往和下拉框的二级联动用在一起。

//获得收费单位动态赋值给下拉框
    	function getCityList(){
    		var provCd=$("#provList").val();
    		var billStyle=$("#billStyle").val();
    		
    		if(provCd==""||billStyle=="")
    			return;
    		var optionstring="";
    		$("#cityList").empty();
    		$.ajax({
   		     url:'<%=root%>/employ/bmfwAction!getBillCompanyBilProvCdAndType',   
   		     type:'post', 
   		     data:'billStyle='+billStyle+'&provCd='+provCd,
   		     success:function(data){
   		    	 $.each(data,function(key,value){  //循环遍历后台传过来的json数据
   		    		 optionstring += "<option value=\"" + value.billMchntCd + "\" >" + value.billNm + "</option>";
   		    	 });
   		    	 $("#cityList").html("<option value=''>请选收费单位</option> "+optionstring); //获得要赋值的select的id,进行赋值
   		     }
   		 });
    	}


下面的追加option

   $("#test").append("<option value='5'>测试5</option>");   //为Select追加一个Option(下拉项)

   $("#test").prepend("<option value='0'>测试6</option>");   //为Select插入一个Option(第一个位置)

3.jquery对select的删除

 $("#test").empty();用的最多 

 $("#test  option:last").remove();   //删除Select中索引值最大Option(最后一个)


 $("#test  option[index='0']").remove();   //删除Select中索引值为0的Option(第一个)

 $("#test  option[value='3']").remove();   //删除Select中Value='3'的Option

 $("#test  option[text='4']").remove();   //删除Select中Text='4'的Option



  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 可以使用jQuery的val()方法来给select下拉框赋值。例如: HTML代码: ``` <select id="mySelect"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` jQuery代码: ``` $("#mySelect").val("2"); ``` 这样就会将下拉框选中值设置为“选项2”。 ### 回答2: Jquery是一款JavaScript库,提供了相当丰富的DOM操作方法,方便我们构建交互性较强的Web页面。如果需要在前端动态的给select下拉框赋值,我们可以使用Jquery提供的方法来实现。 首先,我们需要获取到对应的select下拉框元素,在Jquery中通常使用选择器进行选择,然后使用val()方法给下拉框赋值。例如: ``` // 获取<select>元素,id为cities var $cities = $('#cities'); // 给<select>元素赋值 $cities.val('Shanghai'); // 或者 $cities.val(['Shanghai', 'Beijing']); ``` 上述代码中,我们通过选择器$()获取到id为cities的<select>元素,然后使用val()方法为其赋值。同样的方式,我们也可以在HTML代码中设置option元素来给下拉框赋值,例如: ``` <select id="cities"> <option value="Beijing">北京</option> <option value="Shanghai">上海</option> <option value="Guangzhou">广州</option> </select> ``` 给<select>元素赋值,可以直接赋值option元素的value属性值或者文本内容。如果需要勾选多个选项,可以将值放在一个数组中,例如: ``` // 给<select>元素赋值 $cities.val(['Shanghai', 'Beijing']); ``` 以上就是使用Jqueryselect下拉框赋值的方法,只需要使用val()方法即可轻松实现。同时,Jquery还提供了大量的表单操作方法,如attr()、prop()、serialize()等,可以满足我们表单处理的各种需求。 ### 回答3: 在jQuery中,可以使用val()方法为select下拉框赋值。 语法如下: ``` $('select').val('value'); ``` 其中,第一个参数为赋予的值。 如果需要为多选select下拉框赋值,可以传入一个包含多个值的数组作为参数。 ``` $('select').val(['value1', 'value2', 'value3']); ``` 如果需要清空当前select下拉框中的所有选项,则可以不传入参数。 ``` $('select').val(''); ``` 需要注意的是,给select下拉框赋值时,必须确保传入的值在下拉框的选项中存在。如果传入的值不存在,则不会赋值成功。 另外,如果希望在select下拉框中添加新的选项,则可以使用append()方法,将新增的选项添加到下拉框中,并且赋予相应的值。 下面是一个示例代码: HTML代码: ``` <select id="fruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橘子</option> </select> <button id="change">选择柚子</button> ``` jQuery代码: ``` $(function() { $('#change').click(function() { $('#fruit').val('grapefruit'); }); }); ``` 在点击“选择柚子”按钮之后,select下拉框中会被自动切换为“柚子”对应的选项。 如果需要添加新的选项,则可以使用以下代码: ``` $(function() { $('#add').click(function() { $('#fruit').append($('<option>').val('grapefruit').text('柚子')); }); }); ``` 在点击“添加柚子”按钮之后,select下拉框中会自动添加一个新的选项:“柚子”。 以上就是jQueryselect下拉框赋值的相关方法和示例代码。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值