jquery - 引导多选 : How to change backgroung color if None selected-6ren

jquery - 引导多选 : How to change backgroung color if None selected

转载作者：行者123 更新时间：2023-12-01 03:08:09

25

4

我在网络表单中使用了 Bootstrap Multiselect。我对所有输入/选择字段进行了验证检查。如果表单提交时带有任何空输入或禁用选项或无选择，则所有空字段都会将背景颜色更改为红色似乎所有输入和选择都工作正常。但是，多选的选择我没有改变颜色。以下是仅多选的代码部分:

if($("#example-optionClass").val() == null){
    $("#example-optionClass").css('background-color','red');
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <!-- Include the plugin's CSS and JS: -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#example-optionClass').multiselect({
                    optionClass: function (element) {
                        var value = $(element).val();

                        if (value % 2 == 0) {
                            return 'even';
                        }
                        else {
                            return 'odd';
                        }
                    }
                });
            });
        </script>
        <style type="text/css">
            #example-optionClass-container .multiselect-container li.odd {
                background: #eeeeee;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <h2>Bootstrap Multiselect Test</h2>
            <p>I want to change the Multiselect <b>background color</b>  If 'None Selected'</p>            
            <div id="example-optionClass-container">
                <select id="example-optionClass" multiple="multiple">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                    <option value="6">Option 6</option>
                </select>
            </div>
        </div>

    </body>
</html>

我需要为此编写什么简单的jquery？请帮忙。谢谢

最佳答案

function onchange_multi(){
  setTimeout(function(){ // use timeout because master script run and your script run
    var btn_def = $("#example-optionClass-container").find('.btn-default');
    if($("#example-optionClass").val() === null){
       btn_def.addClass('btn-danger')  //btn-danger default class of bootstrap
    }else{
       btn_def.removeClass('btn-danger')  
    }
  },50);
}


//onload
onchange_multi();

//onchange
$('#example-optionClass').on('change',function(){
  onchange_multi();
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-optionClass').multiselect({
            
            optionClass: function(element) {
                var value = $(element).val();
 
                if (value%2 == 0) {
                    return 'even';
                }
                else {
                    return 'odd';
                }
            }
        });
    });
</script>
<style type="text/css">
    #example-optionClass-container .multiselect-container li.odd {
        background: #eeeeee;
    }
</style>
</head>
<body>

<div class="container">
  <h2>Bootstrap Multiselect Test</h2>
  <p>I want to change the Multiselect <b>background color</b>  If 'None Selected'</p>            
  <div id="example-optionClass-container">
    <select id="example-optionClass" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</div>
</div>

</body>
</html>

关于jquery - 引导多选 : How to change backgroung color if None selected，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40460251/

25

4

0

文章推荐： python - 使用命令 "virtualenv venv"创建Python虚拟环境时出错

文章推荐： scala - 有没有办法在 Scala 中实现分层枚举？

文章推荐： python - 如何使用列表值作为范围？

文章推荐： python - 注释掉的函数和 "comma splice"的作用是什么？

R中介分析——引导
我正在尝试使用中介包在 R 中进行中介分析。我查看了有关如何执行此操作的文档，并通读了 R 提供的示例(即，我已经运行了“example(mediate)”)。尽管如此，我还是无法运行最简单的中介。理
php - 引导 View
我在我的应用程序中引导 View 时遇到问题。我试图在 bootstrap 中获取 View 实例，以便我可以分配 View 变量等。问题是我似乎无法按照推荐的方式来做。我可以做这个: $this
java - 引导 RMI
我已经遵循了几个有关运行 RMI 应用程序的教程。但是，我似乎无法使其工作，因为我一直陷入相同的错误:ClassNotFoundException。我知道这个错误意味着我将文件放在了错误的位置，但我尝
aurelia - 引导 Aurelia
最后，我开始与 Aurelia 合作。有一个入门套件可用 Here这有助于初始化 Aurelia。但它是一个模板，应该在网站模板中使用。我有一个预配置 WebApi项目，我想在其中使用 Aureli
python - 针对回归问题对连续数据的数据集进行重采样(引导)
对于回归问题，我有一个训练数据集: - 3个具有高斯分布的变量 - 20 个均匀分布的变量。我的所有变量都是连续的，在 [0;1] 之间。问题是用于对我的回归模型进行评分的测试数据对所有变量具有均
CSS 溢出滚动(引导)
我正在尝试“拉伸(stretch)”或扩展第 1 列中的 A 部分以填充该行的高度。 1行2列: +---------------------+---------------------+ |
c# - 引导 WPF
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以
css - 引导 -4 填充
我正在使用 bootstrap 4 填充功能。默认情况下，bootstrap4 中的 col 或 col-12 类在左右应用 15px 填充。我想为移动设备设置左右padding 0，所以我使用下面的
linux-kernel - 引导 linux
我正在尝试通过自己编写引导加载程序来引导 linux 内核，但不知道如何加载内核。所有人都在说使用 int 13h 将扇区从硬盘加载到内存。其中部门应该加载？？加载扇区后怎么办？如果可以的话，请
react 路由器 + react 引导
如何合并两者以创建垂直菜单？我有一个基本的路由设置(它可以工作并呈现为标准的水平菜单): Home Gallery Contact 从 react-bootst
reactjs - 我应该在商店中存储永不更改(引导)的数据吗？
我的应用程序中有一些状态来自服务器并且不会更改(在用户 session 的生命周期内)。此状态在 HTML 中引导。我应该将它合并到 reducer 中作为商店的一部分吗？const bootstr
reactjs - 样式组件和 react 引导？
有没有办法使用 styled-components与 react-bootstrap 一起？ React-bootstrap 为其组件公开了 bsClass 属性而不是 className ，这似乎与
html - 引导 iframe 未调整大小
除了 YouTube 播放器的大小之外，以下代码运行良好。我无法将其调整为我想要的大小。我试着把 width="150"和 height="100"在 iframe 但什么也没发生。
jquery - foreach 引导 Accordion
我正在尝试使这个东西与 this one 相同。我已经打印了。但崩溃消耗不起作用。 @foreach($faqs as $faq)
java - 引导 Play 应用程序
我想在启动 Play 应用程序时运行一些代码。这似乎不起作用。有什么线索吗？ public class Global extends GlobalSettings { @Override
machine-learning - 什么是弱监督学习(引导)？
我了解监督学习和无监督学习之间的区别: 监督学习是一种使用标记数据“教导”分类器的方法。无监督学习让分类器“自行学习”，例如使用聚类。但是什么是“弱监督学习”？它如何对示例进行分类？最佳答案更
python - 引导 Python 在另一个文件夹中查找模块
我对 python 还是很陌生，所以请原谅我，如果这是非常简单的或非常错误的思考方式。我安装了 python 2.7。根据我在运行以下代码时的理解，它列出了它查找模块的目录。 Python 2.7.
html - 引导 slider 不滑动
我想使用 bootstrap carousel 制作一个 slider ，但我的 slider 不滑动即使我点击按钮也不会滑动我测试了很多其他的 bootstrap slider ，我也遇到了同样的
python - 引导 numpy 二维数组
我正在尝试通过替换 base 形状为 (4,2) 的 2D numpy 数组按行进行采样，比如 10 次。最终输出应该是一个 3D numpy 数组。尝试了下面的代码，它有效。但是有没有不用 for
jquery - 引导 slider 功能
我是 Bootstrap 的新手，现在我正在检查它的 slider 功能。简单的 slider 和动画效果 - 一切正常。但是我看不懂，我可以做这样的东西吗？ - http://www.owlcar

首页

博学

6Ren·AI

商城

jquery - 引导多选 : How to change backgroung color if None selected