主页 / 问题 / 847777
Accepted
Nice
Asked:2020-06-28 17:29:53 +0000 UTC2020-06-28 17:29:53 +0000 UTC

在选择 value='0' 时使用 jQuery 弹出文本

  • 772

有一个列表和一个按钮。我们如何使用jQuery在我们点击按钮时弹出一个警告<p id="warn">Warning</p>，至少有一个select带有值的value='0' ?

#warn {
  display: none;
}
<select id="length" name="length">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="weight" name="weight">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="height" name="height">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<p id="warn">Warning</p>

<button id="button">Result</button>

html

2 个回答

  1. Best Answer

    var selectLength = $("#length");
var selectWeight = $("#weight");
var selectHeight = $("#height");
var warn = $("#warn");
$("#button").on("click", function() {
  if(!!!selectLength.val() || !!!selectWeight.val() || !!!selectHeight.val() ) {
    warn.css("display", "inline-block");
  } else {
    warn.css("display", "none");
  }
});
    #warn {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="length" name="length">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="weight" name="weight">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="height" name="height">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<p id="warn">Warning</p>

<button id="button">Result</button>

    • 1

  2. 对于选择，最好分配一个类 - 这样选择更容易

    var $select = $('select');
$select.on('change', function(e){
  var $this = $(this);
    $this.val() && $this.removeClass('select_error') 
})
$('#button').on('click', function(e){
  $select.each(function(i, el) {
    var $this = $(el);
    !$this.val() && $this.addClass('select_error') 
  })
})
    #warn {
  display: none;
}
.select_error {
  border-color: red
}
.select_error ~ #warn {
  display: block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="length" name="length">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select id="weight" name="weight">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="height" name="height">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<p id="warn">Warning</p>

<button id="button">Result</button>
 Выполнить код

    您还可以为错误提供一门通用课程。取决于代码结构

    • 1

相关问题