Select Dropdown Option Based On Text Value

[kpcollier]

I'm trying to find a way to set a value for a dropdown based on another text value. 

I am taking records from one table (Table A) and creating new ones in another (Table B ) with some of the information to be used in a calendar datapage. So, I need to grab some of the information from the Table A records when submitting to Table B. I have an initial dropdown that selects a record from Table A. I was originally going to use cascading elements to populate these fields, but I cannot use it for the Technician field because I need the ability to change that. When a cascading element finds a value, the rest of the options in the dropdown go away. In the perfect scenario, it would be nice to be able to autoselect the value of the dropdown from the cascading feature, but still show the rest of the datasource to be selected from.

Since I can't do that, I think I need to rely on JavaScript. The thought going through my head is that maybe if I get the cascading value into a virtual field, and then have the full datasource for the Technician dropdown, and maybe some script that when the virtual field gets a value, that value is selected from the options list in the dropdown?

I've been searching on Stack Overflow to try and figure out how I can do this without much luck. I can't seem to find a way to select a dropdown option based on a text field, however the vice versa seems to be everywhere. 

Any help is appreciated!

[kpcollier]

Or, if anyone has found any other work around for something like this (having a cascading value with the rest of the datasource options available), I would love to see it!

[kpcollier]

I think I am getting close (maybe?)

 

var receiver = document.querySelector("[id^='InsertRecordTech_Schedule_Table_Technician']");
var assigner = document.getElementById('cbParamVirtual1');
$('#'+assigner).change(()=>{
            $('#'+receiver).val($('#'+assigner));
        });

I suck at jQuery but I think I am getting somewhere with this. Virtual Parameter 1 gets the value from cascading. Technician dropdown has the datasource with all Technician options. I have no errors in console with this, but it will not change the selected dropdown value. Any ideas?

[TellMeWhy]

May you elaborate what's happening?

Are you going for something like this? Title is cascaded by the first field, and 3rd field (virtual field) receives the dropdown's value

https://c2aby549.caspio.com/dp/83ff8000f8bce386c9334d21ab42

Here's the code if this is what you're looking for

<script>

document.querySelector('select[id^="InsertRecordTitle"]').addEventListener('change', function(event) {

var dropdown1 = document.querySelector('select[id^="InsertRecordTitle"]');
var Virtual4 = document.getElementById('cbParamVirtual4').value;

 document.getElementById('cbParamVirtual4').value= dropdown1.value;

});

</script>

[kpcollier]

@TellMeWhy Close, but not quite. I need the dropdown to list all Technicians from the datasource at all times, even when there is a matching value.

The problem with making it just a cascading dropdown, is when it finds a match, the rest of the datasource options disappear from the dropdown list. I want it to select the value just like it does for cascading, but allow the value to be changed with the rest of the options list still available. 

So, I am trying to set the dropdown as a normal dropdown with the all of the values, then get the cascading value in the virtual field, and then essentially select the matching value in the dropdown. 

For example, Dropdown Values are A, B, C, D, E. The virtual field receives value C from cascading. Then, JS will select C in the dropdown list. Now the user sees what Technician was assigned to the record with the ability to change it. 

 

Sorry for the long post, but below is an example of why I am trying to do this and my workflow:

I am creating new records in a new table with some information from an existing table. The new table is for the calendar scheduling app. The problem with the first table is that we have a start and end date field for each record. On a calendar datapage, you can only select one date field from the datasource, instead of a range of dates. To counter this problem, I am using a submission form to take information from records.TableA to use for records.TableB and spreading out the dates. 

I am using TableA.ID field for the initial dropdown to populate the information in the new submission form, which the Techinician field is a part of. Usually, the user will schedule the assigned Technician, so cascading would work fine in that case, as it not only automatically fills the value, but it also tells the user which technician is assigned to the work order record. The problem is when that Technician needs help from another Technician - so now we need to assign another technician to the calendar with a work order they are not assigned to. If I use cascading dropdown for this Technician field and needed to change the Technician, I couldn't do it because the cascading effect will remove the other Technician options from the list. 

I hope this helps.

[TellMeWhy]

@kpcollier I see, that's quite the workflow.

Basically, what you want is the onchange function in the virtual field that receives C, and then select that option in the dropdown. It should easily be able to select the same value with the script, like : 

document.addEventListener('change', function (event) { 

document.getElementById("InsertRecordTitle").value = document.getElementById("cbParamVirtual1").value;

});

 

I'm only changing Virtual 1.

[kpcollier]

On 3/25/2021 at 10:21 AM, TellMeWhy said:

 I see, that's quite the workflow

Heh, yeah. It would be insanely easier if Caspio's calendars weren't so out of date. Even the Outlook 2010 calendar has better looks and functionality than anything that can be made with the Caspio alternative. 

Thank you for the help - this worked!