Question

我试图创建类似日期/时间偏好列表的内容。其中首选项是第一天/时间设置，第二首选项是第二天/时间设置。将使用至少两对，但也可以添加更多对。目标是能够选择多个日/时间偏好，但如果有人选择同一天中的两个，那么他们只能选择一个时间偏好。因此，如果我选择星期三为1作为第一个首选项，那么第二个只能选择星期三为2或3。

我在这里寻找两件事。我宁愿尝试使用纯JavaScript。

首先，这是我到目前为止所提出的代码，试图完成我想要做的目标。我想禁用第二个偏好时间值，甚至清除输入，但目前我尝试过的似乎也没有。

其次，如果有人知道一种更清洁，更不引人注目的方式来实施我尝试做的事情，那么我就会知道如何完成这项工作。

function getDays(){
    var days1 = document.getElementById('pref1-day'),
        days1_value = days1.options[days1.selectedIndex].value;

    var days2 = document.getElementById('pref2-day'),
        days2_value = days2.options[days2.selectedIndex].value;

    if (days1_value === days2_value) CheckDrodowns();
}


function CheckDrodowns(){
    var times = document.querySelectorAll('select.times-dropdown');

    for (i = 0; i < times.length; i++) {
        for (j = 0; j < times.length; j++) {
            if (times[i].id != times[j].id) {
                if (times[i].options[times[i].selectedIndex].value === times[j].options[times[j].selectedIndex].value) {
                    alert(times[i].options[times[i].selectedIndex].value);
                    //times[i].selected = false;
                    //times[j].options[times[j].selectedIndex].value = "";
                    return false;
                }
            }
        }
    }
    return false;
}



<div>
    <SELECT id="pref1-day" class="day-dropdown" style="width:150px">
        <option value=""></option>
        <option value="WED">WEDNESDAY</option>
        <option value="THU">THURSDAY</option>
        <option value="FRI">FRIDAY</option>
        <option value="SAT">SATURDAY</option>
    </SELECT>

    <SELECT id="pref1-times" class="times-dropdown" style="width:150px" onChange="getDays()">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </SELECT>
</div>

<div>
    <SELECT id="pref2-day" class="day-dropdown" style="width:150px">
        <option value=""></option>
        <option value="WED">WEDNESDAY</option>
        <option value="THU">THURSDAY</option>
        <option value="FRI">FRIDAY</option>
        <option value="SAT">SATURDAY</option>
    </SELECT>

    <SELECT id="pref2-times" class="times-dropdown" style="width:150px" onChange="getDays()">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </SELECT>
</div>

Here is a jsbin link to view the html and javascript code.

Answer 1

我建议使用复选框来改善用户体验：

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    Wednesday
    <input name="date" type="checkbox" value="Wednesday at 1pm">1pm</input>
    <input name="date" type="checkbox" value="Wednesday at 2pm">2pm</input>
    <input name="date" type="checkbox" value="Wednesday at 3pm">3pm</input>
  </div>
  <div>
    Thursday
    <input name="date" type="checkbox" value="Thursday at 1pm">1pm</input>
    <input name="date" type="checkbox" value="Thursday at 2pm">2pm</input>
    <input name="date" type="checkbox" value="Thursday at 3pm">3pm</input>
  </div>
  <div>
    Friday
    <input name="date" type="checkbox" value="Friday at 1pm">1pm</input>
    <input name="date" type="checkbox" value="Friday at 2pm">2pm</input>
    <input name="date" type="checkbox" value="Friday at 3pm">3pm</input>
  </div>
  <div>
    Saturday
    <input name="date" type="checkbox" value="Saturday at 1pm">1pm</input>
    <input name="date" type="checkbox" value="Saturday at 2pm">2pm</input>
    <input name="date" type="checkbox" value="Saturday at 3pm">3pm</input>
  </div>
  <button onClick="getDays();">Get Days</button>
</body>
</html>

JS

function getDays() {
  var elements = document.getElementsByName("date");
  var dates = [];
  for (var i=0; i<elements.length; i++) {
    if (elements[i].checked) {
      dates.push(elements[i].value);
    }
  }
  var selectedDates = dates.length > 0 ? dates.join(", ") : "No Dates Selected";
  alert(selectedDates);
}

JS Bin

Answer 2

在选择日期后，尝试通过添加侦听器来删除时间选项：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
    </head>
    <body>
        <div>
            <SELECT id="pref1-day" class="day-dropdown" style="width:150px" onChange="checkDays()">
                <option value=""></option>
                <option value="WED">WEDNESDAY</option>
                <option value="THU">THURSDAY</option>
                <option value="FRI">FRIDAY</option>
                <option value="SAT">SATURDAY</option>
            </SELECT>
            <SELECT id="pref1-times" class="times-dropdown" style="width:150px" onChange="getDays()">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </SELECT>
        </div>
        <div>
            <SELECT id="pref2-day" class="day-dropdown" style="width:150px" onChange="checkDays()">
                <option value=""></option>
                <option value="WED">WEDNESDAY</option>
                <option value="THU">THURSDAY</option>
                <option value="FRI">FRIDAY</option>
                <option value="SAT">SATURDAY</option>
            </SELECT>
            <SELECT id="pref2-times" class="times-dropdown" style="width:150px" onChange="getDays()">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </SELECT>
        </div>
    </body>
</html>

JS

function getDays(){
    var days1 = document.getElementById('pref1-day'),
        days1_value = days1.options[days1.selectedIndex].value;

    var days2 = document.getElementById('pref2-day'),
        days2_value = days2.options[days2.selectedIndex].value;

    if (days1_value === days2_value) CheckDrodowns();
}

function CheckDrodowns(){
    var times = document.querySelectorAll('select.times-dropdown');
    for (i = 0; i < times.length; i++) {
        for (j = 0; j < times.length; j++) {
            if (times[i].id != times[j].id) {
                if (times[i].options[times[i].selectedIndex].value === times[j].options[times[j].selectedIndex].value) {
                alert(times[i].options[times[i].selectedIndex].value);
                    return false;
                }
            }
        }
    }
    return false;
}

function checkDays(){
    var days1 = document.getElementById('pref1-day'),
        days1_value = days1.options[days1.selectedIndex].value;

    var days2 = document.getElementById('pref2-day'),
        days2_value = days2.options[days2.selectedIndex].value;

    if (days1_value === days2_value){
        var times1 = document.getElementById('pref1-times'),
            times2 = document.getElementById('pref2-times');
        times2.remove(times1.selectedIndex);
    } 
}

比较多个选择输入的选择输入值以检查是否已选择值

2 个答案: