Jump to content

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


Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...
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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...