时间戳

首页 > 解决方案 > 如果不选择选择框需要更改样式

javascript - 如果不选择选择框需要更改样式

问题描述

如果未选择选择框，我对单击按钮后选择框更改样式感到困惑。

我做错了改变任何人在这里帮助我。我的代码示例在这里。

单击发送按钮后，如果未选择选择框，则 jquery 代码应该可以工作。但它只适用于一个选择框。我在这里做错了什么。

HTML

<div class="container">
<select style="" name="birth_day" id="subscription_day">
 <option value="">Day</option> 
 <option value="1">  01 </option> 
 <option value="2">  02 </option> 
 <option value="3">  03 </option> 
 <option value="4">  04 </option> 
 <option value="5">  05 </option> 
</select>

<!---->
<select style="" name="birth_month" id="subscription_month">
<option value="">Day</option>
 <option value="1">  01 </option>
 <option value="2">  02 </option>
 <option value="3">  03 </option>
 <option value="4">  04 </option>
 <option value="5">  05 </option>
</select> 
<div class="send">Send</div>
</div>

和JS代码

$(document).ready(function() {
  $("body").on("click", ".send", function() {
    var birthday = $("select[name^='birth_day']");
    var birthmonth = $("select[name^='birth_month']");
    if (!birthday.prop("option:selected")) {
      // Check if birthday selected
      birthday.focus().css({
        border: "2px solid rgba(255, 0, 0, 0.6)",
        background: "rgba(255, 0, 0,.05)",
        transition: "all 0.15s ease-out;"
      });
      return false;
    }
    if (!birthmonth.prop("option:selected")) {
      // Check if birthmonth selected
      birthmonth.focus().css({
        border: "2px solid rgba(255, 0, 0, 0.6)",
        background: "rgba(255, 0, 0,.05)",
        transition: "all 0.15s ease-out;"
      });
      return false;
    }
  });
});

DEMO也在这里。

标签： javascriptjquery

解决方案

发生这种情况是因为您在检查第二个选择的值之前从函数返回（如果未选择第一个选择）。

var selected = true; // use a variable to check selection

// .val() checks if the select is selected or not
if (!birthday.val()) { 

  // ...      
  selected = false;
}

// .val() checks if the select is selected or not
if (!birthmonth.val()) {

  // ...
  selected = false;
}

return selected; // return the variable

这是您想要的结果；

推荐阅读