select 标签相关用法--持续更新

最新推荐文章于 2024-07-26 08:34:09 发布

Lynn_Meng

最新推荐文章于 2024-07-26 08:34:09 发布

阅读量1.5k

点赞数 2

分类专栏： Web前端 jquery 文章标签： JavaScript JS select combox

本文链接：https://blog.csdn.net/meng564764406/article/details/102931351

版权

本文探讨select标签的多种用法，包括添加事件、设置选项、取消选择等功能，并提供jQuery combox的示例。作者鼓励读者通过评论交流其他用法，以便不断更新和完善内容。文章还涉及处理默认选项和清空方法的问题。

摘要由CSDN通过智能技术生成

大家好，这篇文章主要是用来介绍select的相关的用法，持续更新文章。记载我在开发过程中，对select遇到的一些用法，多有遗漏，还有很多缺陷，希望大家能积极评论，探讨其他用法。我会积极关注大家的评论，然后更新文章。

OK，Let's go！

本片博客是由select 和Jquery 的combox 两种下拉框实例，请注意使用。

首先给出一个实例代码：

<select name="myselect" id="myselect">
  <option value="opt1">选项1</option>
  <option value="opt2">选项2</option>
</select>

1.增加选择事件:

第一种：添加事件

这个对combox是不适用的
<select name="myselect" id="myselect" onchange='change();'>
  <option value="opt1">选项1</option>
  <option value="opt2">选项2</option>
</select>

function onchange(){
    ...
}

第二种：JQuery添加

第二种更适合页面加载时调用

$("#myselect").change(function(){
  ...
});

点击查看如何主(子)页面加载后调用函数？

2.查看select选项，但是不能选择或不能查看：

$("#myselect option").attr("disabled",""); // 可以下拉选项，但是不能选择
$("#myselect").attr("disabled",""); // 不能下拉选项
$("#myselect").combobox({disabled: true});      //设置下拉款为禁用

3.设置select的选项：

$("#myselect").val("opt1");
$("#myselect").val();
$("#myselect").find("option[value='']").prop("selected", true);
$('#myselect option:first').prop('selected', 'selected');
$("#myselect").find("option:selected")[0].selected=false;
$("#myselect").find("option:contains('pxx')").attr("selected",true);//包含pxx

//设置值为2的option为选中状态
$('#myselect').attr('value','2');
//设置最后一个option为选中
$('#myselect option:last').attr('selected','selected');
$("#myselect").attr('value' , $('#test option:last').val());
$("#myselect").attr('value' , $('#test option').eq($('#test option').length - 1).val());

$("#myselect").combobox('setValue',xlid);  //设置下拉款的默认值  xlid是你下拉款的id属性

4.取消select选项不能选择的功能：