Question

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

如果我做错了地方，任何人都可以在这里帮助我。我的代码示例在这里。

单击发送按钮后，如果未选择selectbox，则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 也在这里。

Answer 1

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

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

Here是您想要的结果；

Answer 2

将代码应用于所有选择的方法是循环遍历每个选择。这还将消除您的代码重复。

$(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;
  });
});

看到一支工作笔here

Answer 3

请尝试以下代码。

tesseract

Answer 4

只需在两个if块中省略return语句即可。

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

4 个答案: