如何更改 Bootstrap-select 的边框颜色 [英] How to change border color of Bootstrap-select

问题描述

对于像 Bootstrap 这样的自定义框架，选择 https://silviomoreto.github.io/bootstrap-select/ 如何在 Javascript 中更改选择框的边框颜色?

我试过了，但没有用.

document.getElementById("box").style.borderColor = "red";

Javascript

function validate() {var ok = true;var box = document.getElementById("box").value;如果(！框){document.getElementById("box").style.borderColor = "red";好 = 假；}返回正常；}

HTML

<select id="box" name="num" class="selectpicker form-control"><option value="" selected="selected">选择编号</option><option value="1">1</option><option value="2">2</option></选择><div class="text-center"><button type="submit" class="btn btn-primary">submit</button>

</表单>

解决方案

如果看到bootstrap-select生成的DOM元素，其实隐藏了原来的select元素并使用 div、span 和 buttons 创建自己的结构.没有提供任何官方文档来更改其 border，但作为一种解决方法，您可以按照以下方式进行:

您需要更改class为btn dropdown-toggle btn-default的button的边框，由生成引导选择.由于创建的元素不会被赋予任何 id，我们将使用它的 class 和 document.getElementsByClassName("classnames")[0]

document.getElementsByClassName("btn dropdown-toggle btn-default")[0].style.borderColor = "red";

<小时>

更新

评论中的解释.

$(document).ready(function() {//为每个选择器添加一个更改事件$('.selectpicker').selectpicker().on('change', function() {var id = $(this).attr('id');//获取当前元素的idvar selected = $(this).find("option:selected").val();//获取当前元素的选中值var 条件 = 假；//默认为false以形成有效$(this).selectpicker('setStyle', 'btn-danger', selected == "" ? "add" : "remove");if (id == "box") {//如果它的第一个选择框条件 = !(选中 == 2 || 选中 == "");//检查它的 value==2 或 value=="" 以便表单验证取决于各自的选择$("#box2").selectpicker(selected == 2 ? "show" : "hide").val("");//根据选定的val显示或隐藏box2$("#box2").selectpicker('setStyle', 'btn-danger',"remove");//当它隐藏或显示时，从第二个选择器中移除危险} 别的 {条件 = !(选中 == "");//如果它的框2检查是否选择了任何值}$(this).closest('form').data('valid', condition);//将其设置为表单的数据有效属性});$("#box2").selectpicker('hide');//页面加载时默认隐藏//表单提交事件而不是validate()内联函数$("form").on("submit", function(e) {e.preventDefault();//防止提交的默认动作var isValid = $(this).data('valid');//检查是否有效如果(！isValid){//如果不是有效循环每个选择器$.each($('.selectpicker'),function(){var selected=$(this).val();//检查每个选择的适当值，并为各个选择器设置/删除 btn-danger 类$(this).selectpicker('setStyle', 'btn-danger', selected == "" ? "add" : "remove");})}别的{警报(有效)；//提交表单}})});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- 最新编译和缩小的 JavaScript --><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script><!--向表单添加 data-valid 属性以确保其有效与否并默认为 false--><form action="#" data-valid="false" method="POST"><select id="box" name="num" class="selectpicker form-control"><option value="" selected="selected">选择编号</option><option value="1">1</option><option value="2">2</option></选择><select id="box2" name="num" class="selectpicker form-control"><option value="" selected="selected">选择编号</option><option value="1">1</option><option value="2">2</option></选择><div class="text-center"><button type="submit" class="btn btn-primary">submit</button>

For a custom framework like Bootstrap select https://silviomoreto.github.io/bootstrap-select/ how do I change the border color of a select box in Javascript?

I tried this but does not work.

document.getElementById("box").style.borderColor = "red";

Javascript

function validate() {
    var ok = true;

    var box = document.getElementById("box").value;

    if (!box) {
        document.getElementById("box").style.borderColor = "red";
        ok = false;
    } 

    return ok;
}

HTML

<form action="#" onsubmit="return validate()" method="POST">
    <select id="box" name="num" class="selectpicker form-control">
      <option value="" selected="selected">select number</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>

    <div class="text-center">
        <button type="submit" class="btn btn-primary">submit</button>
    </div>
</form>

解决方案

If you see the DOM element generated by bootstrap-select, it actually hides the original select element and creates its own structure with div,span and buttons. There isn't any official documentation provided to change its border, but as a workaround you could do it as below:

You need to change border of the button whose class is btn dropdown-toggle btn-default, which is generated by bootstrap-select. Since the element created will not be given any id we will make use of its class with document.getElementsByClassName("classnames")[0]

document.getElementsByClassName("btn dropdown-toggle btn-default")[0].style.borderColor = "red";

---

Update

Explanation in comments.

$(document).ready(function() {
  //add a change event to each selectpicker
  $('.selectpicker').selectpicker().on('change', function() {
    var id = $(this).attr('id'); //get current element's id
    var selected = $(this).find("option:selected").val(); //get current element's selected value
    var condition = false; //default false to form valid
    $(this).selectpicker('setStyle', 'btn-danger', selected == "" ? "add" : "remove");
    if (id == "box") {//if its first select box
      condition = !(selected == 2 || selected == ""); //check if its value==2 or value=="" so that form validation depends of respective selects
      $("#box2").selectpicker(selected == 2 ? "show" : "hide").val("");
      //show or hide box2 based on selected val
      $("#box2").selectpicker('setStyle', 'btn-danger',"remove");
      //remove danger from 2nd selectpicker when its hidden or shown
    } else {
      condition = !(selected == "");
      //if its box 2 check if any value is selected
    }
    $(this).closest('form').data('valid', condition);
    //set it to form's data-valid attribute
  });
  $("#box2").selectpicker('hide');//default hide on page load
  
  //form submit event instead of validate() inline function
  $("form").on("submit", function(e) {
    e.preventDefault();//prevent default action of submit
    var isValid = $(this).data('valid');//check if its valid
    if (!isValid) {
      //if not valid loop through each selectpicker
      $.each($('.selectpicker'),function(){
        var selected=$(this).val();
        //check appropriate values for each select and set/remove the btn-danger class for respective selectpickers
        $(this).selectpicker('setStyle', 'btn-danger', selected == "" ? "add" : "remove"); 
      })
    }
    else{
      alert(isValid);
      //Submit your form
    }
  })
});

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<!--add data-valid attribute to form to make sure its valid or not and default to false-->

<form action="#" data-valid="false" method="POST">
  <select id="box" name="num" class="selectpicker form-control">
    <option value="" selected="selected">select number</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select id="box2" name="num" class="selectpicker form-control">
    <option value="" selected="selected">select number</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <div class="text-center">
    <button type="submit" class="btn btn-primary">submit</button>
  </div>
</form>

这篇关于如何更改 Bootstrap-select 的边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！