首先,我很抱歉没有包含代码,但是由于使用了selected.js插件,我不确定所有要包含的内容。我遇到的问题是我想使用jquery更改selected.js select元素的css。我可以在selected.css文件中更改css,但是无法使用jquery更改它。以下代码适用于普通输入type = text,但不适用于我的selected.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>


将id从选择的书面html更改为selected.js创建的div,并且阴影显示但不正确。

新的jquery代码:

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


使用此代码的阴影图像:
javascript - 使用JQuery更改Chosen.js CSS-LMLPHP

奇怪的是,如果我直接将边框阴影添加到css文件中的.chosen-container-single.chosen-single,那么边框就会像我期望的那样显示。不幸的是,我只希望在用户提交表单但未选择选项时发生这种情况。下图显示了当前行为:
javascript - 使用JQuery更改Chosen.js CSS-LMLPHP

意识到这一点之后,我还发现它可以通过jquery将addClass .error应用于.chosen-container-single.chosen-single,并且按预期工作。它将所需的阴影应用于所有选择。我尝试了#program_chosen.chosen-container-single #program_chosen.chosen-single,但是什么也没有发生...

我觉得我已经接近了,但是我错过了最后的联系。任何想法都欢迎!提前致谢!

-可悲的是,我几乎整天都在研究这是一个简单的问题。感谢Steve帮助我利用addClass清理了我的代码,而不是一遍又一遍地写盒子阴影...我的新错误。问题是selected.js正在创建的div的高度大于其所包含的空间。我要做的就是在selected.css文件中设置高度,然后神奇地将框阴影完美地拟合起来。通过其他一些事情,但这只是通过调整一些边距来解决的。尽管如此愚蠢,但我希望它可以帮助其他人避免将来头痛。

最佳答案

我建议使用一个类来控制您的错误状态。尝试以下方法:

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');

关于javascript - 使用JQuery更改Chosen.js CSS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36096706/

10-09 15:30