Javascript 如果未选择selectbox，则需要更改样式

如果未选择selectbox，则我的客户对单击按钮后selectbox更改样式感到困惑

在我做错的地方，请大家帮帮我。这里是我的代码示例

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

HTML

---

也在这里。

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

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

---

是你想要的结果

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

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

是你想要的结果

请尝试下面的代码

$(document).ready(function() {
  $(".send").on("click", function() {
    var selected = true;
    var birthday = $("#subscription_day");
    var birthmonth = $("#subscription_month");
    //console.log(birthday+'=>'+birthmonth);
    if (!birthday.val()) {
      // Check if birthday is 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;"
      });
      selected = false;
    }
    if (!birthmonth.val()) {
      // Check if birthmonth is 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;"
      });
      selected = false;
    }
    return selected;
  });
});

请尝试下面的代码

$(document).ready(function() {
  $(".send").on("click", function() {
    var selected = true;
    var birthday = $("#subscription_day");
    var birthmonth = $("#subscription_month");
    //console.log(birthday+'=>'+birthmonth);
    if (!birthday.val()) {
      // Check if birthday is 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;"
      });
      selected = false;
    }
    if (!birthmonth.val()) {
      // Check if birthmonth is 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;"
      });
      selected = false;
    }
    return selected;
  });
});

---

只需省略两个if块中的return语句。

只需省略两个if块中的return语句。

要将代码应用于所有选择，您可以做的是循环执行其中的每一个。这也将消除代码重复

$(document).ready(function() {
  $("body").on("click", ".send", function() {
    var validated = true;

    // choose an appropriate selector to select only the selects you need
    $( 'select' ).each( function() {
      // all selects you are looping through will be referred as this
      if ( $( this ).find( 'option:selected').val() === '' ) {
        validated = false;

        $( this ).focus().css({
          border: "2px solid rgba(255, 0, 0, 0.6)",
          background: "rgba(255, 0, 0,.05)",
          transition: "all 0.15s ease-out;"
        });
      }
    } );

    // preventing default behavior if a field is empty
    return validated;
  });
});

---

查看工作笔

要将代码应用到所有选择中，您可以做的是在每个选择中循环。这也将消除代码重复

$(document).ready(function() {
  $("body").on("click", ".send", function() {
    var validated = true;

    // choose an appropriate selector to select only the selects you need
    $( 'select' ).each( function() {
      // all selects you are looping through will be referred as this
      if ( $( this ).find( 'option:selected').val() === '' ) {
        validated = false;

        $( this ).focus().css({
          border: "2px solid rgba(255, 0, 0, 0.6)",
          background: "rgba(255, 0, 0,.05)",
          transition: "all 0.15s ease-out;"
        });
      }
    } );

    // preventing default behavior if a field is empty
    return validated;
  });
});

---

查看工作笔

您是否可以在两个

if

条件中删除

retrun false

，然后重试您是否可以在两个

if

条件中删除

retrun false

，然后重试