Question

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

<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选择下拉列表中选择星期一或星期二的方法。

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

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

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

Answer 1

由于我们开始使用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/

正如其他人所说，可能需要某种基于提交的验证。当网站批评他们的每一个选择时，用户必须动态地解决问题，这有点令人讨厌。但是如果你想提供一些帮助文本，这是一个非常简单的方法。

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

Answer 2

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

<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>

javascript以确保两个选项分开

2 个答案: