jquery操作select常见方法大全【7种情况】

jQuery操作select常见方法大全【7种情况】攻略

一、获取select选中的value值

通常我们在进行表单提交前需要拿到用户选择的选项，此时需要获取select选中的value值，可以使用以下代码来获取：

var selectVal = $(select).val();

其中，select表示你想要获取value值的select元素的选择器，可以是类选择器、id选择器等。

二、设置select选中某个选项

如果我们需要在页面初始化时默认选中某个选项，或者用户进行了其他操作后需要选中某个选项，可以使用以下代码实现：

$(select).val(value);

其中，select表示你想要设置选中的select元素的选择器，可以是类选择器、id选择器等，value表示你需要选中的那个option的value值。

三、获取select选中的文本

如果我们需要获取用户所选选项的文本值，可以使用以下代码实现：

var selectText = $(select).find('option:selected').text();

其中，select表示你想要获取文本值的select元素的选择器，可以是类选择器、id选择器等。

四、设置select选中某个文本值

如果我们需要在页面初始化时默认选中某个文本选项，或者用户进行了其他操作后需要选中某个文本选项，可以使用以下代码实现：

$(select).find("option:contains('text')").attr("selected", true);

其中，select表示你想要设置选中的select元素的选择器，可以是类选择器、id选择器等，text表示你需要选中的那个option的文本值。

五、动态添加select选项

如果我们需要在页面加载完成后或者用户进行其他操作后，在select中动态地添加一个选项，可以使用以下代码实现：

$(select).append("<option value='value'>text</option>");

其中，select表示你想要添加选项的select元素的选择器，可以是类选择器、id选择器等，value表示新添加的option的value值，text表示新添加的option的文本值。

六、动态删除select选项

如果我们需要在页面加载完成后或者用户进行其他操作后，在select中删除某个选项，可以使用以下代码实现：

$(select).find("option[value='value']").remove();

其中，select表示你想要删除选项的select元素的选择器，可以是类选择器、id选择器等，value表示你需要删除的option的value值。

七、禁用select选项

禁用一个select元素中的某个option，可以使用以下代码实现：

$(select).find("option[value='value']").attr("disabled","disabled");

其中，select表示你想要禁用选项的select元素的选择器，可以是类选择器、id选择器等，value表示你需要禁用的option的value值。

示例1：对于一个类选择器为.select-demo的select元素，可以使用以下代码将第三个选项选中：

$('.select-demo').val('3');

示例2：对于一个类选择器为.select-demo的select元素，可以使用以下代码在末尾添加一个value为"4"，文本为"选项4"的新选项：

$('.select-demo').append("<option value='4'>选项4</option>");