0

我有两个选择框，例如，允许用户选择有效日期

<select name="valid">
    <option>monday</option>
    <option>tuesday</option>
    <option>wednesday</option>
    <option>thursday</option>
    <option>friday</option>
    <option>saturday</option>
    <option>sunday</option>
</select>

<select name="valid-2">
    <option>monday</option>
    <option>tuesday</option>
    <option>wednesday</option>
    <option>thursday</option>
    <option>friday</option>
    <option>saturday</option>
    <option>sunday</option>
</select>

我需要一种方法来确保用户选择星期一然后他们不能在有效的 2 选择下拉菜单中选择星期一或星期二。

但是，如果没有做一些事情，比如禁用有效两天的两天，我不知道该怎么做。

我想我可以在用户选择第一个下拉菜单后进行第二个选择下拉菜单。

所以我的问题是你会怎么做。有没有简单易行的方法。

4

2 回答 2

2

由于我们开始使用 jQuery，这是我的解决方案：

$(function () {
    var $one = $("[name='valid']"), 
        $two = $("[name='valid-2']"), 
        $both = $($one).add($two),
        $error = $("#error");

    $both.on("change", function () {
        var index = $one.find(":selected").index(),
            index_two = $two.find(":selected").index();

        //Note: will also catch sunday/monday combo (that's why it's % 6)
        if((Math.abs(index_two - index) % 6) < 2) {
            //Show an error of some sort, like this:
            $both.css("border", "1px solid red");
            $error.text("Dates cannot be less than 2 days apart!");
        } else {
            //Hide the error message:
            $both.css("border", "");   
            $error.text("");
        }
    });
});

我在选项后抛出了一个错误<span>，你可以在我的 JSFiddle 演示中看到它：

http://jsfiddle.net/V7HMU/

正如其他人所说，可能需要某种基于 onsubmit 的验证。当网站批评他们的每一个选择时，用户不得不即时整理东西，这对用户来说有点烦人。但是，如果您想提供一些帮助文本，这是一种非常简单的方法。

我应该注意，如果您将 ID 分配给<select>下拉菜单，并且还提供了一些更简单的方法来衡量值（例如给它们提供数值），这可能会更有效。但我不想过多地弄乱您的 HTML（除了默认为有效选项）。

于 2012-09-18T00:05:58.067 回答
1

您可以执行以下操作，如果它在第一天之后不到两天，则提供修复第二天的提示。请注意，它环绕一周，因此在第一个选择中选择星期日意味着您必须在第一个选择中选择星期二或更晚。

<script>
function validateSelect(el) {

  var msgEl = document.getElementById('errMsg');
  var errMsg = 'Second day must be at least two days after first day';
  var val1 = el.form.valid.selectedIndex;
  var val2 = el.form['valid-2'].selectedIndex;

  val2 = val2 < val1? val2 + el.options.length : val2;

  msgEl.innerHTML = (val2 - val1) < 2? errMsg : '';

}
</script>

<form ...>
<select name="valid" onchange="validateSelect(this);">
    <option selected>monday</option>
    <option>tuesday</option>
    <option>wednesday</option>
    <option>thursday</option>
    <option>friday</option>
    <option>saturday</option>
    <option>sunday</option>
</select>

<select name="valid-2" onchange="validateSelect(this);">
    <option selected>monday</option>
    <option>tuesday</option>
    <option>wednesday</option>
    <option>thursday</option>
    <option>friday</option>
    <option>saturday</option>
    <option>sunday</option>
</select>
<span id="errMsg"></span>
</form>
于 2012-09-18T01:00:27.703 回答