2 dropdowns with same option set - remove the option from the option from dropdown2 if selected in dropdown1 and vice versa

[lengleng]

Hi, as the title suggests. I have two dropdowns on my DataPage with the same Lookup Table. If an option is already selected on the first dropdown, I want to remove that option on the second dropdown so the user can't select the same option on both dropdowns. Does anyone know if this is simple enough to do in Caspio? Thanks!

[TellMeWhy]

I was just doing this recently!

I'm not sure if there's a better code to combine the two for loops together, but this is my setup and it works, I put this on the footer of my Submission Form DataPage.
 

<script>

document.onchange = function() {
var dropdown1 = document.getElementById('InsertRecordTitle');
var dropdown1val = document.getElementById('InsertRecordTitle').value;

var dropdown2 = document.getElementById("InsertRecordDescription");
var dropdown2val = document.getElementById("InsertRecordDescription").value;

for (var i=1; i<dropdown2.length; i++) {
    if (dropdown2.options[i].value == dropdown1val){
        dropdown2.options[i].style.display = "none";
    }
    else {dropdown2.options[i].style.display = "block";}
}

for (var i=1; i<dropdown1.length; i++) {
    if (dropdown1.options[i].value == dropdown2val ){
         dropdown1.options[i].style.display = "none";
       }
    else {dropdown1.options[i].style.display = "block";}
  

}
};

</script>

check out how this works in this link https://c2aby549.caspio.com/dp/83ff800033fd0e1cb5154f31a868

[lengleng]

On 1/15/2021 at 9:50 AM, TellMeWhy said:

I was just doing this recently!

I'm not sure if there's a better code to combine the two for loops together, but this is my setup and it works, I put this on the footer of my Submission Form DataPage.
 

<script>

document.onchange = function() {
var dropdown1 = document.getElementById('InsertRecordTitle');
var dropdown1val = document.getElementById('InsertRecordTitle').value;

var dropdown2 = document.getElementById("InsertRecordDescription");
var dropdown2val = document.getElementById("InsertRecordDescription").value;

for (var i=1; i<dropdown2.length; i++) {
    if (dropdown2.options[i].value == dropdown1val){
        dropdown2.options[i].style.display = "none";
    }
    else {dropdown2.options[i].style.display = "block";}
}

for (var i=1; i<dropdown1.length; i++) {
    if (dropdown1.options[i].value == dropdown2val ){
         dropdown1.options[i].style.display = "none";
       }
    else {dropdown1.options[i].style.display = "block";}
  

}
};

</script>

check out how this works in this link https://c2aby549.caspio.com/dp/83ff800033fd0e1cb5154f31a868

Hi @TellMeWhy, I apologize for the late reply, and thank you for this script! It's working for me now, however, if you have time, how will this look like if say I have three dropdowns instead?

[lengleng]

2 minutes ago, KweenYasmin said:

Hi @TellMeWhy, I apologize for the late reply, and thank you for this script! It's working for me now, however, if you have time, how will this look like if say I have three dropdowns instead?

Oh nevermind, I think I got it,

 

<script>

document.onchange = function() {
var dropdown1 = document.getElementById('InsertRecordTitle');
var dropdown1val = document.getElementById('InsertRecordTitle').value;

var dropdown2 = document.getElementById("InsertRecordDescription");
var dropdown2val = document.getElementById("InsertRecordDescription").value;

var dropdown3 = document.getElementById("InsertRecordTEXT");
var dropdown3val = document.getElementById("InsertRecordTEXT").value;

for (var i=1; i<dropdown3.length; i++) {
    if (dropdown3.options[i].value == dropdown1val || dropdown3.options[i].value == dropdown2val){
        dropdown3.options[i].style.display = "none";
    }
    else {dropdown3.options[i].style.display = "block";}
}

for (var i=1; i<dropdown2.length; i++) {
    if (dropdown2.options[i].value == dropdown1val || dropdown2.options[i].value == dropdown3val){
        dropdown2.options[i].style.display = "none";
    }
    else {dropdown2.options[i].style.display = "block";}
}

for (var i=1; i<dropdown1.length; i++) {
    if (dropdown1.options[i].value == dropdown2val || dropdown1.options[i].value == dropdown3val ){
         dropdown1.options[i].style.display = "none";
       }
    else {dropdown1.options[i].style.display = "block";}
  

}
};

</script>

 

I just created another variable for the 3rd dropdown and set the if conditions with OR '||' so it will check the values of the 2 other dropdowns