Jquery操作下拉框、按钮、复选框：获取、选中、删除、隐藏等

àì夳堔傛蜴生んèń 2023-02-11 08:56 64阅读 0赞

最近做项目需要对下拉框进行不同选取，特此整理下相关操作。

# 一、普通下拉框示例 #

1：获取下拉框中的值

$("#testId").val();//获取选中的value值
    $("#testId").find("option:selected").val();//获取选中的value值
    $("#testId").find("option:selected").text();//获取选中的text值

2：选中具体的值（方式一）

$("#testId option:eq(1)").attr("selected","selected");//select选中第二个option
    $("#testId").val("2");//设置value为2的项选中

3：选中具体的值（方式二）

# 二、动态表格下拉框数据 #

根据保存的隐藏域的值选中下拉框值

$("#PD00013 tbody tr").each(function(){ 
    	  var text = $(this).find("[name^=text_departure_display]").val();
    	  var value = "";
    	  $(this).find("[name^=departure] option").each(function(){ 
    	    if($(this).text()==text){ 
    	      value = $(this).val();
    	    }
    	  });
    	  $(this).find("[name^=departure]").val(value);
    	});

# 三、Jquery选中、删除单选、多选按钮 #

选中AAC汽运状态：  
![在这里插入图片描述][20200522175830417.jpg]

//选中按钮的第一个值
    $("input[name='radio1']:eq(0)").attr("checked",'checked'); 
    $("input[name='outsourcingOrNot']:eq(0)").prop("checked",'checked');
    //选中值为AAC汽运的按钮
    $(":radio[name='radio1'][value='" + AAC汽运 + "']").prop("checked", "checked");
    //获取选中的值
    $('input[name="radio1"]:checked').val();

删除选中的AAC汽运按钮：

//删除选中的按钮值
    $("#radio1").removeAttr("checked");
    $('input:radio[name="isWaiBaoOrNot"]').removeAttr('checked');
    $('input:radio[name=outsourcingOrNot]').attr('checked',false);

操作动态表格中单选按钮：  
![在这里插入图片描述][20200522175937973.jpg]

如果设置不可编辑，则用如下方法：

$('#CustomerInfo').attr("disabled","true");//普通下拉框
    $('#CustomerInfo').removeAttr("disabled");//移除下拉框不可编辑

$("#tht tbody tr").each(function(){ 
         $(this).find("[name^=deliveryOrderType]").attr('disabled', true);//动态表格
     });

如果隐藏按钮，则通过前面添加div，通过div控制

$("\#onlyWayStyle").hide();//隐藏  
$("\#onlyWayStyle").show();//显示

# 四、复选框隐藏 #

![在这里插入图片描述][20210619182049284.png]  
分析域账号value值为yzh  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppa2UxMTIzMQ_size_16_color_FFFFFF_t_70]  
隐藏域账号复选框

$('[name=IT13_applyType][value=yzh]').prop('disabled', true).parent().hide();

效果如下  
![在这里插入图片描述][20210619182236541.png]

[20200522175830417.jpg]: https://img-blog.csdnimg.cn/20200522175830417.jpg
[20200522175937973.jpg]: https://img-blog.csdnimg.cn/20200522175937973.jpg
[20210619182049284.png]: https://img-blog.csdnimg.cn/20210619182049284.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppa2UxMTIzMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210619182214362.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppa2UxMTIzMQ==,size_16,color_FFFFFF,t_70
[20210619182236541.png]: https://img-blog.csdnimg.cn/20210619182236541.png