stackoom
  简体   繁体   中英

Comparing select input values of multiple select inputs to check if a value has been selected

 原文  2018-05-29 22:56:19  9   2    javascript/ arrays

Question

I'm trying to create something like a day/time preference listing. Where preference one is the first day/time set and the second preference is the second day/time set. A minimum of two pairs will be used but more can be added as well. The goal is to be able to select multiple day/time preferences but if someone selects two of the same day then they can only select only one time preference. So if I select Wednesday at 1 for the first preference, then the second can only select Wednesday at 2 or 3.

I'm kind of looking for 2 things here. I would prefer to try this using pure javascript.

First, here's the code I've come up with so far to try and accomplish the goal I'm looking to do. I want to disable the second preference time value or even clear the input but currently what I've tried doesn't seem to do either.

Second, if someone knows a cleaner more unobtrusive way to implement what I'm trying to do as well I'm up for ideas on how to get that done. 

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.

2 answers

solution1
 0  2018-05-29 23:52:33

I would suggest using checkboxes for an improved user experience:

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

solution2
 0  2018-05-30 01:15:44

Try removing the time option by adding a listener when the day is selected as this : 

<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);
    } 
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Check whether selected option has no value, across multiple select fields Hide a select when a value has been selected (and page reloads) how to filter if label / value has been selected in react select? How to set selected value to multiple Select inputs with jQuery? Javascript : Check if multiple select dropdown has same value except the first selected option How to check for each row of a table, the value of the selected select instead of getting all the available options and text input values How to know with jQuery that a "select" input value has been changed? Hide an option in a multiple select, when a specific option has been selected from another select Cannot get selected value of select with jQuery when the select has been set with jQuery Select element has selected value -1
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM