Question

首先，我对不包含代码感到抱歉，但由于我使用的是selected.js插件，因此我不确定要包含哪些内容。我遇到的问题是我想使用jquery更改selected.js选择元素的css。我能够更改selected.css文件中的CSS，但我无法使用jquery更改它。下面的代码适用于普通输入类型=文本，但不适用于我选择的任何.js下拉列表。以下是我正在使用的一些代码片段：

HTML：

<select class="chosen frm-field" id="program" name="program">
    <option selected="selected" value="0"></option>
    <option value="1">Adult</option>
    <option value="2">Dislocated Worker</option>
    <option value="3">In-School Youth</option>
    <option value="4">Out-of-School Youth</option>
</select>

jquery的：

function showErrors() {
    $('#program').css({
    '-webkit-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)",
    '-moz-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)",
    'box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)"});
}

尝试添加选择的js .trigger但仍然没有运气：

$('#program').css({
    '-webkit-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)",
    '-moz-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)",
    'box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)"}).trigger("chosen:updated");

从Chrome Inspect呈现代码：

<select class="chosen frm-field error" id="program" name="program" style="display: none;">
   <option selected="selected" value="0"></option>
   <option value="1">Adult</option>
   <option value="2">Dislocated Worker</option>
   <option value="3">In-School Youth</option>
   <option value="4">Out-of-School Youth</option>
</select>
<div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 100%;" title="" id="program_chosen">
   <a class="chosen-single chosen-default">
      <span>Select One</span>
      <div>
         <b></b>
      </div>
   </a>
   <div class="chosen-drop">
      <div class="chosen-search">
         <input type="text" autocomplete="off" readonly="">
      </div>
      <ul class="chosen-results">
         <li class="active-result" data-option-array-index="1">Adult</li>
         <li class="active-result" data-option-array-index="2">Dislocated Worker</li>
         <li class="active-result" data-option-array-index="3">In-School Youth</li>
         <li class="active-result" data-option-array-index="4">Out-of-School Youth</li>
      </ul>
   </div>
</div>

将选择写入的html中的id更改为selected.js创建的div，并且阴影显示但不正确。

新的jquery代码：

$('#program_chosen').addClass('error');

使用此代码着色的图像：

如果我将边框阴影直接添加到.chosen-container-single＆amp;在css文件中.chosen-single然后边框显示为我所期望的。不幸的是，我只希望在用户提交表单但没有选择选项时发生这种情况。下面的图像显示当前行为：

在意识到这一点后，我发现它可以将addClass .error应用于.chosen-container-single＆amp; .chosen-single通过jquery，它按预期工作。它将所需的阴影应用于所有选择。我试过#program_chosen.chosen-container-single #program_chosen.chosen-single但没有任何反应......

我觉得我很接近，但我错过了最后的联系。欢迎任何想法！提前谢谢！

- 可悲的是，我几乎整天都在努力找出这是一个简单的问题。感谢史蒂夫通过利用addClass帮助我清理我的代码，而不是一遍又一遍地编写盒子阴影......我犯了一个错误。问题是所选择的div的高度.js创建的高度大于它所包含的空间。我所要做的就是在selected.css文件中设置高度，然后神奇地将盒子阴影完美地装上。这通过一些其他的东西，但他们只是通过调整一些利润来修复。这很愚蠢，我希望它可以帮助别人避免将来头痛。

Answer 1

我建议使用类来控制错误状态。试试这个：

function showErrors() {
    $('#program').addClass('error');
}

然后添加这个CSS：

#program.error {
     -webkit-box-shadow: 0px 0px 2px 2px rgba(255,0,0,1);
     -moz-box-shadow': 0px 0px 2px 2px rgba(255,0,0,1);
     box-shadow': 0px 0px 2px 2px rgba(255,0,0,1);
}

当然，在清除错误时你需要删除这个类，所以在适当的时候运行它：

$('#program').removeClass('error');

用JQuery更改Chosen.js CSS

1 个答案: