Question

我在我的Select标记上使用 selectized.js 来增加可搜索性。我的问题是对selectize的验证。我想在没有选定值的情况下将边框颜色更改为选定的红色。我试图添加一个带有红色边框的类，但是它不起作用。有没有办法改变边框的颜色？

<select class="rui-selectize-element rui-selectize-select" id="finasst">
    <option value="0">FALSE</option>
    <option value="1">TRUE</option>
</select>

例如

var finasst = $("#finasst").val();

if(finasst == ''){
   //add classe to change color
}

Answer 1

您可以通过以下方式来实现：将选择元素的默认边框颜色设为红色，并在更改选择选项时使javascript函数删除颜色，这可以通过将html代码更改如下来实现：

<select class="rui-selectize-element rui-selectize-select" id="finasst" style="border: solid red" onchange="border_change();">
<option value="0">FALSE</option>
<option value="1">TRUE</option></select>

并添加如下javascript函数：

function border_change(){
var select_element = document.getElementById("finasst");
if(select_element.selectedIndex>=0)
    select_element.style.borderColor = "";}

希望这可以解决您的问题。

这是我的代码的代码段：

function border_change(){
    var select_element = document.getElementById("finasst");
    if(select_element.selectedIndex>=0)
        select_element.style.borderColor = "";
}

<select class="rui-selectize-element rui-selectize-select" id="finasst" style="border: solid red" onchange="border_change();">
    <option value="0">FALSE</option>
    <option value="1">TRUE</option>
</select>

如果它不起作用，请给我更多有关您的要求的详细信息。

动态更改所选选项的边框颜色

1 个答案: