开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何设置级联select2值onClick

级联select2是指在一个下拉框选择某个值后，根据该值的不同，动态地改变另一个下拉框的选项。点击事件（onClick）是当用户点击某个元素时触发的事件。

要设置级联select2值onClick，可以按照以下步骤进行：

确保已引入select2库：在HTML页面的<head>标签中引入select2的CSS和JS文件。

<link rel="stylesheet" href="select2.min.css">
<script src="select2.min.js"></script>

创建HTML结构：使用<select>标签创建两个下拉框，并为它们分别设置一个唯一的id属性。

<select id="select1"></select>
<select id="select2"></select>

初始化select2插件：在页面加载完成后，使用JavaScript代码初始化select2插件，并绑定第一个下拉框的change事件。

$(document).ready(function() {
    $('#select1').select2();
    $('#select1').on('change', function() {
        // 更新第二个下拉框的选项
        updateSelect2Options();
    });
});

定义更新选项的函数：根据第一个下拉框的选中值，动态更新第二个下拉框的选项。

function updateSelect2Options() {
    var selectedValue = $('#select1').val();

    // 根据选中值获取对应的选项数据，可以通过AJAX请求后台获取或从本地数据源中筛选
    var optionsData = getOptionsData(selectedValue);

    // 清空第二个下拉框的选项
    $('#select2').empty();

    // 添加新的选项到第二个下拉框
    for (var i = 0; i < optionsData.length; i++) {
        var option = new Option(optionsData[i].text, optionsData[i].id);
        $('#select2').append(option);
    }

    // 触发select2插件的更新事件
    $('#select2').trigger('change');
}

根据需要定义获取选项数据的函数：根据第一个下拉框的选中值，从后台或本地数据源获取对应的选项数据。
样式美化和其他操作：根据需求对select2进行样式美化或其他操作。

这样，当用户点击第一个下拉框时，会触发change事件，从而动态改变第二个下拉框的选项。

以上是如何设置级联select2值onClick的步骤，下面是腾讯云相关产品和产品介绍链接的示例：

腾讯云产品：云服务器（CVM）

概念：腾讯云服务器（Cloud Virtual Machine，CVM）是腾讯云提供的一种可弹性伸缩的计算服务。
分类：按配置型和实例类型划分。
优势：高性能、高可靠性、灵活扩展、安全可靠。
应用场景：网站托管、应用程序部署、大数据分析等。
产品链接：云服务器（CVM）

腾讯云产品：弹性负载均衡（CLB）

概念：腾讯云弹性负载均衡（Cloud Load Balancer，CLB）是一种用于将访问流量分发到多台云服务器的负载均衡服务。
分类：按网络类型划分，包括公网负载均衡和私有网络负载均衡。
优势：高可靠性、高可用性、高扩展性、智能调度。
应用场景：网站、应用系统、流量调度等。
产品链接：弹性负载均衡（CLB）

注意：以上示例仅为腾讯云产品的一部分，实际情况中可以根据需求选择适合的产品。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

基于Metronic的Bootstrap开发框架经验总结（3）--下拉列表Select2插件的使用

在上篇《基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用》介绍了数据的分页处理，使用了Bootstrap Paginator插件，另外对树形列表，采用了JSTree插件，本篇继续介绍在编辑页面中常用到的控件Select2，这个控件可以更加丰富传统的Select下拉列表控件，提供更多的功能和更好的用户体验。 1、Select2控件介绍这个插件是基于Select的扩展插件，能够提供更加丰富的功能和用户体验，它的github官网地址为:https://sel

09

select2 使用教程（简）「建议收藏」

用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。

02

一段探索React自建内部构造的旅程

在先前的文章里我们涵盖了React基本原理和如何构建更加复杂的交互组件。此篇文章我们将会继续探索React组件的特性，特别是生命周期。

04

python_day15_前端_jQue

<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

02

select2 api参数的文档

// 加载数据 $("#e11").select2({ placeholder: "Select report type", allowClear: true, data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}] }); // 加载数组支持多选 $("#e11_2").select2({ createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} }, multiple: true, data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}] }); function log(e) { var e=$("

"); $("#events_11").append(e); e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); }); } // 对元素进行事件注册 $("#e11") .on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); }) // 改变事件 .on("select2-opening", function() { log("opening"); }) // select2 打开中事件 .on("select2-open", function() { log("open"); }) // select2 打开事件 .on("select2-close", function() { log("close"); }) // select2 关闭事件 .on("select2-highlight", function(e) { log ("highlighted val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 高亮 .on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 选中事件 .on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 移除中事件 .on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 移除完毕事件 .on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");}) // 加载中事件 .on("select2-focus", function(e) { log ("focus");}) // 获得焦点事件 .on("select2-blur", function(e) { log ("blur");}); // 失去焦点事件 $("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); }); 官网文档地址是：http://select2.github.io/select2/#documentation。说再多也没用，最后我们来个实例来证明一下ajax请求远程数据，以截图为准：

05

学习jQuery？这篇文章就够了

jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 AJAX 以及其他功能。

01

08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器

LOT.UI分解系列汇总：http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下：https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI 这个必须说下，本来是用Bootstrap-Select做的，很漂亮，正好后台也是Bootstrap。后来发现不能满足需求。标签有则选，没则添加而Bootstrap-Select的文本框是不可以手动输入的==》so，用了Select2，这

09

Ajax方式分页加载列表实现

最近需要用到这个功能，所以这几天一直在研究这个，目前大致功能已实现，后续需要完善，但需要的功能点已完成，记录下；

02

select2如何黏贴选择

有时在使用select2插件时会遇到这种需求：一次性选择一些数据，然后根据这些数据自动选择相关项，我也遇到了这种需求并实现，这里简单讲讲我的做法：

02

ui-select官方教程（二）——ui-select指令

ui-select指令 ui-select的指令和事件属性选项描述值默认值 multiple 多选，直接加上multiple属性 close-on-select 在多选情况下，选中一项，就关闭下拉项 boolean true append-to-body 在多选情况下，选中项追加显示 boolean false ng-disabled 控件被禁用 boolean true ng-model 控件绑定对象 String,number,array undefined search-enabled

01

clipboard使用Require自动复制「建议收藏」

由于没有使用过require，在微擎人人商城中遇到了一个需要自动复制内容的功能。头疼了一番。

04

select2的使用

你必须在其它地方能获取到这个select标签，所以要为其设置id、class或者是name以便能得到这个标签。multiple属性是是否可以多选。option是下拉框中多选的内容。例如在angluar中，使用ng-repeat循环出来值xxx，然后放在option中供select使用。

01

Html 收银页面设计

一、效果图 image.png image.png image.png 二、前端页面 1、商品列表： reserveCommodityOnShelfList.jsp <%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp" %> <html> <head> <title>商品管理</title> <meta name="decorat

03

laravel-admin的多级联动方法

laravel-admin的框架已经定义好的多级联动可以去官网查看，这里就不再进行赘述，但是使用中发现功能与想要的东西有些偏差，刚进来默认的时候不好用，就自己改了改，增加了一个默认的方法。

05

新手编程1001问（2）

A：上一期，我们回答了JS/JQuery如何获取下拉框选中的文本和值。那么今天的问题，我们可以继续聊聊下拉框了。

04

displaytag如何实现获取到每行的id字段的值。

使用封装好的框架，有时候，对于一个知识点不熟悉，可能会浪费你大把的时间，我使用displaytag主要是使用它的分页技术，但是客户提出的需求，是获取到每行的id，然后选择一个用户名称（用户id），将他们关联操作，其实业务很简单，但是获取到你想要的这一行，一开始确实难为着我了，后来才发现，很简单。

02

03_JavaScript学习笔记整理-DOM

DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器

02

select2没有默认选择项

往select2里面通过jquery的append添加数据，但是没有默认选择第一项，通过设置select默认选择项的方法设置该选择框的默认选择项，虽然通过$("#select").val()的方法知道该选择框有了默认选择项，但是select2显示的是placeholder的内容，如何解决？

01

bootstrap模态框之加载页面至modal-boby

思路：使用$("#reserveForm").html(result); result为Ajax请求controller所返回的页面

02

PIE-Engine APP:凉山州火灾高发地异常度分析系统

这里我们利用凉山州作为火灾边界，同样可以切换我们所需要的区域，可以切换省级代码来进行，需要手动修改。这里我们用到的swith 和case的案例条件判断分析，

01

laravel框架select2多选插件初始化默认选中项操作示例

本文实例讲述了laravel框架select2多选插件初始化默认选中项操作。分享给大家供大家参考，具体如下：

05

PIE-engine APP教程 ——基于水体指数或监督分类方法的水体频率计算

本次我们来查看进行水体处理的分布，我们这里首先对数据进行预处理，先进行NDWI，AWEI、MNDWI等计算函数和去云函数，第二部分市机器学习部分这里有三个机器学习模型，分别是随机森林、贝叶斯和支持向量机

01

thymeleaf-extras-db 0.0.1发布，select标签加载数据的新姿势

在写thymeleaf页面的时候，我为了偷懒，不想为每个select下拉列表框都写一个接口，于是这个懒人jar诞生了。该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性，直接运行sql并初始化select数据。

03

PIE-Engine APP:1984-2021年黄河口及其附近海域的悬浮泥沙、透明度和叶绿素a的结果

本次教程我们主要是展示一个之前航天宏图竞赛的结果，主题是将PIE二次开发的作品结果的展示：“1984-2021年黄河口及其邻近海域水质遥感监测”，我们这里可以看到一个简单的APP界面，并没有太大的操作，但是代码达到1000+，我们首先看到代码加载矢量边界，并将填充颜色预加载，这里分别设定悬浮泥沙、透明度和叶绿素颜色的设定，然后开始进行相应的Landsat 5/7/8分别计算叶绿素函数，透明度和的计算，最后，加载相应的按钮和标签等控件

01

bootstrap table x-editable select2——带图标的选择

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/78149202

01

下拉框、下拉控件之Select2。自动补全的使用

1、使用插件，首先要引入别人的插件了，你可以选择离线（无网络）或者在线引用的（如果有网络）。

04

Excel实战技巧68：创建级联列表框（使用ADO技巧）

在《Excel实战技巧67：在组合框中添加不重复值（使用ADO技巧）》中，我们使用记录集技巧给组合框添加了不重复值，并概要讲述了ADO记录集基础知识。本文利用记录集技巧，创建级联列表框。

02

高质量编码--传感器数据同比

下面介绍其前端代码，先看html页面，使用boostrap作为样式和布局，引入了bootstrap-daterangepicker插件作为日期范围选择面板，引入select2插件作为下拉选择列表，引入moment作为时间格式化工具，引入echarts作为图表库：

00

yii2组件之下拉框带搜索功能的示例代码（yii-select2）

简单的小功能，但是用起来还是蛮爽的。分享出来让更多的人有更快的开发效率，开开心心快乐编程。如果你还没有使用过composer，你可就out了，看我的教程分享，composer简直就是必备神奇有木有。都说到这个点上了，我们赶紧使用composer进行安装吧。不急，先来看看效果图是啥样的，不然都没心情没欲望看下去。

02

小程序 | 11-组件化

自定义组件由 json、wxml、wxss、js 四个文件组成，我们通常是在根目录下创建一个文件夹——components，在该文件夹中存放我们自定义的公共组件。

02

BootstrapTable (前后端分页，表格 ajax 返回数据回调处理) 配置参数全说明

bootstrap table使用总结前端分页使用实例： var App = { renderSummaryData: (res) => { var hitchDOM = "

04

基于Metronic的Bootstrap开发框架经验总结（7）--数据的导入、导出及附件的查看处理

在很多系统模块里面，我们可能都需要进行一定的数据交换处理，也就是数据的导入或者导出操作，这样的批量处理能给系统用户更好的操作体验，也提高了用户录入数据的效率。我在较早时期的EasyUI的Web框架上，也介绍过通过Excel进行的数据导入导出操作，随笔文章为《基于MVC4+EasyUI的Web开发框架经验总结（10）--在Web界面上实现数据的导入和导出》，本文基于Bootstrap的框架基础上，再对这个模块进行更新处理，以及Office文档或者图片等附件的查看处理。 1、数据的导入操作一般系统模块里面，

07

一篇文章带你掌握mysql的一致性视图（MVCC）

提到事务，你肯定会想到ACID（Atomicity、Consistency、Isolation、Durability，即原子性、一致性、隔离性、持久性），我们就来说说其中I，也就是“隔离性”。

03

使用select2分批异步加载大量数据

最近在项目啊开发中需要从下拉列表中获取游戏ID，而后台游戏数据有将近25万条，这种情况下是不可能实现一次性加载的，只能分批异步加载。找了很多插件，都没有合适的，也想过自己做一个插件，无奈时间有限，任务比较紧，只能借助第三方插件，缩短项目时间。最终找到了select2这个插件。

02

Blazor带我重玩前端(六)

本文主要讨论Blazor事件内容，由于blazor事件部分很多，所以会分成上下两篇，本文为第二篇。

03

select2搜索内容显示搜索词

在使用select2的搜索功能时，搜索结果会显示搜索关键词，这不是我想要的，我只想让用户选择列表框实际存在的数据，再一次还是select2 3.5版本(点击打开链接)的官方文档,官方解释：

04

select2的搜索框不能输入搜索内容

按照select2官网配置完后，搜索框弹出后无法输入内容，究竟怎么回事，于是在其他页面尝试了select2，发现可以啊，为什么在这个地方不可以，终于找到了造成这个问题的不同之处：select2在模态对话框中会失效。找到了问题所在，但不知道如何解决：百度或者google，最终找到了解决方案：

03

laravel-admin解决表单select联动时,编辑默认没选上的问题

今天在开发公司一个功能时，公司开发环境用的是laravel-admin，因为需要用上select联动，所以根据文档说明进行开发，并成功的使用上了，代码我就不重复，大家可以去参考laravel-admin官网的说明。

03

select 遇到的坑

一、select遇到的坑 1、select赋默认值--多选和单选 1.1 单选：$('#id').val( value ); //这里是字符串 1.2 多选：$('#id').val( array ); //这里必须将多个值组成的字符串（或者其他非数组）转化成数组 1.2.1 字符串转数组：str.split(","); //改变原字符串，不创建新的数组，所以改变原字符串为数组，只

04_使用JS完成功能

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/100785.html原文链接：https://javaforall.cn

06

day03_js学习笔记_03_js的事件、js的BOM、js的DOM

day03_js学习笔记_03_js的事件、js的BOM、js的DOM ============================================================================= ============================================================================= 涉及到的知识点有：五、js的事件 1、js的常用事件 onclick

01

jquery操作select的几种情况

jquery操作select分为获取option的值、删除option、增加option、获取option的长度、清空select、判断select框中是否存在某个值。

02

Select2-Ajax获取数据

遇到一个需求: 在前端使用 Select2 设计一个联想输入 dropdown, 通过 Ajax 动态抓取数据

04

Blazor学习之旅(4)数据共享

在 Blazor 中，从名为“组件”的自包含代码部分生成 UI。每个组件都可以包含 HTML 和 C# 代码的混合。组件是通过使用 Razor 语法编写的，其中的代码是用 @code 指令标记的。其他指令可用于访问变量、绑定到值以及实现其他呈现任务。

02

实习第六周

https://stackoverflow.com/questions/11872832/how-to-respond-to-clicks-on-a-checkbox-in-an-angularjs-directive

02

[jQuery学习系列六]6-jQuery实际操作小案例

前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> <head> <script type="text/javascript"> function check() { String.prototype.format = function(){ var args = arguments; return this.repl

select2支持中英文检索

最近在使用英文检索select2（V3.5版本）时发现一个问题：多音字，重庆在有的拼音库里面被翻译成了重(zhong)庆，无奈只有同时支持中文检索，select2如何支持中英文检索呢,下面直接如题，上代码~~~

03

常用js，css文件统一加载方法，并在加载之后调用回调函数

为了方便资源管理和提升工作效率，常用的js和css文件的加载应该放在一个统一文件里面完成，也方便后续的资源维护。所以我用js写了以下方法，存放在“sourceController.js”文件内。 /** * Created by MingChen on 2016/11/3. */ function sourceController() { this.root = ""; this.callfunc = null; // 回调函数 this.css = []; thi

07

Web-第三天 JavaScript学习【悟空教程】

用户在提交表单时，需要对用户的填写的数据进行校验。本案例只对用户名、密码、确认密码和邮箱进行校验。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭