如何制作带有标志的语言选择器按钮? (html + js)[关闭]

2023-12-03

我正在尝试使用 HTML 和 JS 中的标志制作一个语言选择器按钮,但我得到的结果与我在此处找到的示例不匹配:https://codepen.io/brapastor/pen/BWyomB选择器选择器可以工作,但标志和外观不起作用。 请问我做错了什么?

 <select class="selectpicker" data-width="fit">
    <option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option>
  <option  data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option>

<script type='text/javascript'> $(function(){
    $('.selectpicker').selectpicker();
});</script>

Codepen允许从外部源添加 CSS 和 Javascript 库,并且这些库不可见,除非您单击设置/齿轮链接来公开它们,以下是您应该如何包含它们:

$(function(){
  $('.selectpicker').selectpicker();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>`
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<select class="selectpicker" data-width="fit">
    <option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option>
  <option  data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option>
</select>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何制作带有标志的语言选择器按钮? (html + js)[关闭] 的相关文章

  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • Iframe 相对路径挑战

    我有一个页面 在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • jQuery 获取元素内的鼠标位置

    我希望制作一个控件 用户可以在 div 内单击 然后拖动鼠标 然后松开鼠标以指示他们想要的内容有多长 这是针对日历控件的 因此用户将指示特定事件的时间长度 看起来最好的方法是在父 div 上注册一个 mousedown 事件 而父 div
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • Jquery 验证不能正确验证数字?

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是
  • 如何在jquery中以相反的顺序迭代元素? [复制]

    这个问题在这里已经有答案了 我是jquery的新手 我想知道如何使用each 在jquery中以相反的顺序迭代表单元素 任何帮助 将不胜感激 尝试这个 input get reverse each function
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • 长轮询会冻结浏览器并阻止其他 ajax 请求

    我正在尝试在我的中实现长轮询Spring MVC Web 应用程序 http static springsource org spring docs 2 0 x reference mvc html但在 4 5 个连续 AJAX 请求后它会
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • 无效字符错误:“fred”

    我确信他一定是一个新手问题 简单来说 我想定义我的第一个 Polymer dart 组件 只是我一直在同一个减速带上踢脚趾 为了使事情变得非常简单 我将其简化为一个非常简单的示例 我做了一个简单的rename示例 跑表 来自 Dart 组件
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

  • Tkinter - 尽管保留全局引用,但图像不会显示在按钮上

    我想在右上角放置一个按钮 并让该按钮成为图像 我了解范围 垃圾收集等 并且已经看到这里提出的所有其他问题都忽略了这一事实 但是 我尝试了多种方法 包括创建self photo并将照片声明为全局变量 实际上 我什至不相信这就是问题所在 因为我
  • 删除脚本 SQL Server 2008

    这是我正在尝试解决的情况 我有一个充满重复项的表 发生这种情况是因为相似的行是从两个不同的源加载的 这是在包中得到处理的 但我想删除那些重复的行 这里没有关键属性 我不能使用无PK 他们俩sources是克利夫兰城和俄亥俄州立大学 我有一列
  • .NET Framework 4.5 目录在哪里?

    我已经安装了 Windows 8 Visual Studio 2012 但没有 v4 5 目录 WINDIR Microsoft NET Framework 我是否做错了什么 或者 NET 4 5 与其他版本不同 如果是因为我没有安装工具
  • 分配给 $null 的对象属性不会测试 $null 的 true

    我已经开始使用 PowerShell 来完成一些事情并使用变量 null在 PowerShell 中 我在分配变量时遇到了问题 null对于类中定义的变量 测试返回false not true 示例代码 class test string
  • 无法弄清楚如何将我的非 MVC 站点从 sitemap.xml 路由到另一个 .aspx 页面

    当搜索 google 时 唯一的解决方案出现在 MVC 网站上 我的 asp net 4 0 站点不是 MVC 我希望请求 sitemap xml 加载另一个动态 aspx 页面 以便我可以动态生成 google 的链接 我花了几个小时搜索
  • 脚本语言如何使用套接字?

    Python Perl 和 PHP 全部支持TCP 流套接字 但是 假设我只有 FTP 访问权限而没有机器的 root 访问权限 那么如何在 Web 服务器 例如 Apache 运行的脚本文件中使用套接字呢 当客户端连接到特定端口时 如何调
  • Common Lisp 的复制树:哪些对象将被原始对象和副本共同引用?

    我正在阅读实用 Common Lisp 并且有一个关于 Lisp 的问题COPY TREE功能 书上给出了调用的例子 copy tree 1 2 3 4 5 6 书上解释完之后 是这么说的 如果原始内容中的 cons 单元格引用了原子值 则
  • window.focus() 在 Google Chrome 中不起作用

    只是想知道 Google Chrome 是否会支持window focus 在某一点 当我说支持时 我的意思是让它发挥作用 对它的调用不会失败 它只是不执行任何操作 所有其他主流浏览器都不存在此问题 FireFox IE6 IE8 和 Sa
  • 如何检查字符串是否是唯一标识符?

    uniqueidentifier SQL Server 是否有与 IsDate 或 IsNumeric 等效的函数 或者有什么相当于 C TryParse 的东西吗 否则我将不得不编写自己的函数 但我想确保我没有重新发明轮子 我试图涵盖的场
  • 如何按修改日期列出 Amazon S3 存储桶内容?

    大多数时候 我们会将文件加载到公共 S3 存储桶中 因此很难找出其中的数据 如何查看在特定日期上传的对象 一种解决方案可能会使用s3api 如果您的对象少于 1000 个 那么它很容易工作 否则您需要使用分页 s3api可以列出所有对象并具
  • 我可以在 cmake 时获取 CMake 为特定 vcproj 生成的 GUID 吗?

    前言 我正在尝试将我的 C csproj 与我们的 C 和 C CLI 代码库 cmake 构建的其余部分集成 我收到了反对尝试这样做的建议 因为 CMake 不能与 Visual Studio 中的 NET 很好地协作 但在实现一些自定义
  • 如何在 Postgres 兼容模式下使用 H2 作为嵌入式数据库,来自 jruby/rails

    我想启动一个 jruby rails 应用程序来使用 Postgres 但我想在开发和测试中运行时在 Postgres 兼容模式下使用 H2 在 H2 或 postgresql 中启动应用程序没有问题 但如何配置使用嵌入式 H2 数据库运行
  • 在 Bootstrap 模式中定位一个元素

    我编写了这段代码 以便当用户位于密码文本框时 他 她可以按 Enter 登录 但是 我认为因为它位于引导模式中 所以我无法使用 jQuery 选择器来定位它 任何想法 这是 HTML div class modal content div
  • Java中有生成随机字符的功能吗?

    Java有生成随机字符或字符串的功能吗 或者必须简单地选择一个随机整数并将该整数转换为ASCII代码到字符 要生成 a z 中的随机字符 Random r new Random char c char r nextInt 26 a
  • 错误:无法启动守护进程:

    错误 无法启动守护进程 无法保留足够的空间 对象堆的空间 请在项目的 Gradle 中分配更多内存gradle properties file 例如 下面的行 在gradle properties文件中 将最大 Java 堆大小设置为 1
  • iPhone:仅在横向模式下,第一次 addSubview 后,UITableViewController 无法正确旋转

    一个最小的说明性 Xcode 项目可以在github 在我的 UIWindow 上 当我添加第二个 及后续 UITableView 作为子视图时 它们无法正确旋转 因此会出现在侧面 这仅在模拟器中进行了测试 这是给您的一些代码 void a
  • Fortran 2003 中的内在赋值和多态性

    我尝试添加一个过程该模块 写者 弗拉基米尔F 它在 Fortran 2003 中实现了一个通用链表 为了方便起见 我希望能够将列表的内容作为数组输出 因此我将以下过程添加到名为的文件中的列表模块中lists f90 subroutine l
  • 使用参数插入多行 Sql Server

    我试图弄清楚是否有一种方法可以在使用参数的同时在 Sql Server 中执行多个值插入 准确地说 有这样的命令 com new SqlCommand insert into myTable values recID tagID con c
  • 量子谐振子/SHM 建模

    我需要帮助来弄清楚为什么我的 b 基态图看起来错误 这是完整的问题 我认为完整发布它将为我尝试使用的方法提供上下文 a 考虑在两个无限高的壁之间有一个方形势井 其 0 间隔距离 等于玻尔半径 即对于区间 0 中的所有 x 写一个函数solv
  • 如何制作带有标志的语言选择器按钮? (html + js)[关闭]

    Closed 这个问题是无法重现或由拼写错误引起 目前不接受答案 我正在尝试使用 HTML 和 JS 中的标志制作一个语言选择器按钮 但我得到的结果与我在此处找到的示例不匹配 https codepen io brapastor pen B