SOLVED: Populate element value in new record with user choice from dropdown

import {session} from 'wix-storage';

$w.onReady(function () {
})

//once a specific meeting has been selected then open edit strip and existing topics strip to see and edit topics/agenda items associated with the chosen meeting date and store the dropdown1.value (meeting date) in wix-storage.
export function dropdown1_change(event) {
  $w("#editStrip").expand();
  $w("#existingTopicsStrip").expand();
  session.setItem("key", $w("#dropdown1").value);
}

//if a new topic needs to be added to the selected meeting then click the newRecordButton (New Topic), add a new record to the topicsDS dataset, and set the dropdown2.value to equal dropdown1.value (both dropdown lists come from the same dataset (meetingsDS).
export function newRecordButton_click(event) {
let value = session.getItem("key"); 

Promise.allSettled([ $w("#topics").add()])
        .then(([resultOne,]) => {
          $w('#dropdown2').value = session.getItem("key");

});
}

Help. I have spent days on this searching the internet and much additional trial and error. I must be missing something conceptually. Whether you can offer a hint or an answer I welcome the help.

Problem
I can’t get the dropdown2 item index (value? or do I just call it the user’s chosen value? or default choice?) to populate with the user selection from dropdown1 when the newRecordButton is clicked.

More specifically, it does work unless I connect dropdown2 to its topicsDS dataset so the data can be saved. If I don’t have dropdown2 connected to topicsDS dataset the code does cause the element to populate with the selection the user made in dropdown1. Dropdown2 needs to be connected to topicsDS though, I was just trying to isolate the problem so I disconnected it and discovered it worked. So, my problem seems to be in how to populate the dropdown2 element when it has a connection to a dataset.

Datasets

  • meetingsDS

  • topicsDS
    Elements

  • dropdown1 (list comes from meetingsDS and filters topicsDS, this dropdown does not connect and save its data anywhere. It is just a filter for topicsDS)

  • dropdown2 (list comes from meetingsDS and data is connected to topicsDS so data can be saved in that dataset because this element is used for editing meeting agenda items/topics.

  • newRecordButton (creates a new record in topicsDS, and populates the element dropdown2 in the new record with the user’s dropdown1 choice - this is where the problem is)

@Paul Krzyz @anthonyb I have updated my description of my issue as I have incorporated your insight and further isolated the problem. Hopefully this makes it easier for someone to help me. Thank you by the way, your help has been appreciated!

import {session} from 'wix-storage';

$w.onReady(function () {
})

//once a specific meeting has been selected then open edit strip and existing topics strip to see and edit topics/agenda items associated with the chosen meeting date
export function dropdown1_change(event) {
  $w("#editStrip").expand();
  $w("#existingTopicsStrip").expand();
  session.setItem("key", $w("#dropdown1").selectedIndex);
  console.log(session.getItem("key"));//generates correct result

}

//if a new topic needs to be added to the selected meeting then click the newRecordButton (New Topic), add a new record to the topicsDS dataset, and set the dropdown2 "value" (aka item index) to equal the item index of dropdown 1 (both dropdown lists come from the same dataset (meetingsDS).
export function newRecordButton_click(event) {
let value = session.getItem("key"); 

$w('#topicsDS').add();
$w('#dropdown2').selectedIndex = Number(value);
console.log(value);
}

//This works as desired but ONLY if dropdown2 is not connected to topicsDS.  However, dropdown2 needs to have its data saved to topicsDS dataset so the agenda item (topic) is associated with a meeting date.

#set_selectedIndex_in_dropdown_connected_to_dataset #add() #help_please_im_drowning_in_one_inch_of_code

@tdb7942 The onReady() fires only once - when all of the elements of the page are loaded. It’s not meant to reside inside of other functions. You can define element functions inside of the onReady function like this:

$w.onReady(function () {
    $w("#newTopicButton").onClick((event) => {
        $w("#textInput").value = $w("#dropdown").value;
    })
});

Or if your button function is “properly registered” in the property sheet, you could also do it this way:

$w.onReady(function () {

});

export function newTopicButton_click(event){
    $w("#textInput").value = $w("#dropdown").value;
}

Good question, it is a dataset called topics. I understand the confusion. I am simplifying my example by relabeling the elements in the description and code below. Thanks for looking at this @tony-brunsman . I have tried wix-storage (memory and session) to hold the data but since I can print the correct data (dropdown1.value) in console.log I think it is less of an issue of capturing the value than it is of placing it in the dropdown2.value. Is there anything I am conceptually missing about populating the value of a dropdown? Does that retrieved value have to match one of the target dropdown options? Will it not work if the retrieved or target dropdown choices come from a list? Dropdown2 does get its list from the dataset that Dropdown 1 populates from. It is kind of like I need dropdown2 filtered by dropdown 1 (but only if a new record is needed…) Maybe when the New Topic (record) button is pushed I need to get the index of the dropdown 1 option that was chosen and set that index in dropdown1 instead of getting the value? Thank you for any help you can offer. I am willing to read and research but I don’t even know what concepts to search next.

#dropdown_populated_by_another_dropdown_index #set_dropdown_value

export function Button_click ( event ) {
let newDate = String ( $w ( ‘#dropdown1’ ). value
$w ( ‘#dataset’ ). add ();
$w ( ‘#dropdown2’ ). placeholder = newDate ; //placeholder works fine
$w ( ‘#dropdown2’ ). value = newDate ; //value doesn’t work

}

Hi there, you can NOT directly assign a value to a dropdown.
Can’t do this: $w ( ‘#dropdown2’ ). value = newDate ;

If you want to change the items in a dropdown, you have to reload all the items for the dropdown as well as your change.

The dropdown items are stored in the options array.
The array contains key-value pairs (label, value), which define each row of your dropdown.

What I don’t understand, is the second dropdown only going to contain 1 value from the first dropdown? If so, why do we need the second dropdown?, since it will only contain 1 item.

When I need to deal with getting the value from a dropdown, I wait for the user to make a dropdown selection. I use the .change(event) of the dropdown. So when the user selects an item in a dropdown, the event fires. Then I get the value from the dropdown and take an action.

See Wix Velo docs: https://www.wix.com/velo/reference/$w/dropdown/options

I reread your latest post and from what I understand is:

dropdown1 is populated from a dataset (meeting times)
is dropdown2 also populated with the same items as dropdown1?

If both dropdowns contain the same items, then to sync dropdown2, to match that of dropdown 1 then you could use the change event on dropdown1 to update the current index of dropdown2. This of course will only work if both dropdown lists are the same, and in the same order.

eg:

export function dropdown1_change(event) {
    // set dropdown2 to match dropdown1
    if ($w("#dropdown1").selectedIndex !== undefined) {
        $w("#dropdown2").selectedIndex = $w("#dropdown1").selectedIndex;    
    }
}
 

Ok, I’m still fuzzy about this but I think you can change the selectedIndex of dropdown2 to match that of dropdown1 when the person clicks on the ‘New Topic’ button. It looks like that is when you add the new record, and you have an event on that button already monitoring the .click(event) . It should be the last thing down in that event.

Just confirming, when the page initially loads, both dropdown1 and dropdown2 are loaded with the same values, it’s just that the selection should be blank for both because no selection was made?

I’m a little unclear with the timing of when dropdown2 is getting populated.

I’m checking out too, maybe we’ll connect tomorrow.