如何在asp.net c#中使用jquery验证更改多选板颜色答案

【问题标题】：how can change multi select board color using jquery validation in asp.net c#如何在asp.net c#中使用jquery验证更改多选板颜色
【发布时间】：2021-10-28 00:50:31
【问题描述】：

我正在尝试这个，

if ($(this).hasClass('select2') == true && $(this).hasClass('required') == true) {
  var idName = $(this)[0].id;
  var e = document.getElementById(idName);
  var strUser = e.options[e.selectedIndex].value;
  if (strUser == 0) {
    alert("Please select a user");
    document.getElementById(idName).style.borderColor = "red";
    document.getElementById(idName).style.borderWidth = "1px";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddltest1" class="form-control select2 required" multiple="multiple" tabindex="2">
  <option value="0">--select--</option>
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

如何改变选择下拉框的边框颜色？它不工作......

【问题讨论】：

$(this).hasClass('select2') 不是 JavaScript。那是 jquery。

标签： javascript c# html jquery

【解决方案1】：

你是 jquery 和 javascript 的混合体。更改一些代码以解决问题

var idName = $(this)[0].id;改为var idName = $('#ddltest1').attr('id');

$(this) 用于当前标签，但您没有显示正在处理的事件。

将var strUser = e.options[e.selectedIndex].value; 更改为$('#ddltest1').val() 以获取选定值。

$(document).ready(function(){

if ($('#ddltest1').hasClass('select2') == true && $('#ddltest1').hasClass('required') == true) {
 
   var idName = $('#ddltest1').attr('id');
 
  var e = document.getElementById(idName);
  var strUser = $('#ddltest1').val();
  if (strUser == 0) {
    alert("Please select a user");
    document.getElementById(idName).style.borderColor = "red";
    document.getElementById(idName).style.borderWidth = "1px";
  }
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddltest1" class="form-control select2 required" multiple="multiple" tabindex="2">
  <option value="0">--select--</option>
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

【讨论】：