草庐IT

jquery - 样式引导选择 "placeholder"不同

coder 2023-08-04 原文

如果选择的选项是第一个(占位符)，我已经成功地为我的普通选择元素应用了不同的样式，就像这样:

<script type="text/javascript">
        $(document).ready
        (
            function () 
            {
                $('select').each(function (index, value)
                {
                    if($(this).val()==="")
                    { 
                        $(this).css('font-style', 'italic');
                        $(this).css('color', '#636c72');
                        $(this).children().css('font-style', 'normal');   
                    }
                    else
                    {
                        $(this).css('font-style', 'normal');
                        $(this).css('color', 'black');
                        $(this).children().css('font-style', 'normal');    
                    }
                });
            }
        );
    </script>

但是，我的一些表单正在使用 bootstrap-select 组件，因为它们包含的条目数量巨大(可能有数千个)，并且需要有一种方法通过文本搜索来缩小条目范围。这些组件会产生更复杂的 HTML，上面的代码根本不起作用。

我正在尝试找到一种方法来应用与我的正常选择相同的逻辑:如果选择的选项是第一个，则将输入设置为斜体并使用不同的颜色。这是此类选择的示例:

<select class="form-control selectpicker" id="medFilter" name="medFilter" th:value="${medFilter}"
                                            onchange="this.form.submit()" data-live-search="true" title="Select Med"> 
                                            <option value="">Search Med</option>
                                            <option th:each="med : ${meds}" th:value="${med.id}" 
                                                th:text="${med.toString()}" th:selected="${med.id == medFilter}">
                                                </option>
                                        </select>

有没有人能做到这一点？

最佳答案

事情是 - bootstrap-select替换 <select>至 <button>和 <>option > 至 <a> .

这会使您的代码出现问题，原因有两个:

  1. 您尝试(并且可能成功)设置隐藏元素的样式(因为 option 和 select 在选择器启动后立即被隐藏。)
  2. 您绑定(bind)到 document.ready而不是引导选择的初始化。

使用 CSS 设置新元素的样式而不是旧元素:

a.placeholder, button.bs-placeholder {
  font-style: italic !important;
  color: #636c72;
}

HTML(注意 bs-placeholder 类对于 bootstrap-select 是开箱即用的，当它没有值时，您不需要添加它。):

<select required class="form-control selectpicker" id="medFilter" name="medFilter" title="Select Med">
      <option class="placeholder" selected value="">Search Med</option>
      <option value="med-1">Med 1</option>
      <option value="med-2">Med 2</option>
</select>

只要它可以用 css 存档，我就会放弃 document.ready造型方法。

Plunkr:https://plnkr.co/edit/EAbTMz1WQnFWwtLsmYbZ?p=preview

关于jquery - 样式引导选择 "placeholder"不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55891496/

placeholderampcode34optionjqueryhtmlcssbootstrap-select

有关jquery - 样式引导选择 "placeholder"不同的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  4. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  5. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  6. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  7. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  8. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  9. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  10. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

随机推荐