0

たとえば、ユーザーが有効な日を選択できる2つの選択ボックスがあります。

<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選択ドロップダウンで月曜日または火曜日を選択できないようにする方法です。

ただし、有効な2日間で2日間を無効にするなどのことを行わないと、その方法がわかりません。

ユーザーが最初のドロップダウンを選択した後、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/

他の人が言っているように、ある種の提出ベースの検証がおそらく求められています。サイトがすべての選択を批判している間に、その場で物事を整理しなければならないのは、ユーザーにとって少し面倒です。ただし、ヘルパーテキストを提供する場合、これは非常に簡単な方法です。

<select>ドロップダウンにIDを割り当て、値を測定するためのより簡単な方法（数値を与えるなど）を提供した場合、これはより効率的である可能性があることに注意してください。しかし、私はあなたのHTMLをあまりいじりたくありませんでした（デフォルトで有効なオプションを使用することを除いて）。

于 2012-09-18T00:05:58.067 に答える
1

1日目から2日以内の場合は、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>
于 2012-09-18T01:00:27.703 に答える