Hi,
I have a couple of products (building supplies) that I can sort via two dropdown menues. But if the first drop down menu “dropdown1” = anithing but “pipes”, I want the other dropdown menu to disapear. The other dropdown “dropdown 2” is for choosing the diameter of the pipe (wich is no longer relevant if you choose for example “wall” or “cable ladder”.
I saw this post with my exact ptoblem but I cant get the code right.
export function typeddl_change ( event , $w ) {
let value = event . target . value ;
if ( value === ‘pipes’ ) {
$w ( ‘dropdown2’ ). show ();
}
else {
$w ( ‘#dropdown2’ ). hide ();
}
}
I am new to Wix editor and programming in general so help is much appreciated.
The only issue in the code you provided is that you missed a # in $w(‘dropdown2’).show(). Other than that the only reason why it wouldn’t work is if you have deleted the event handler from the dropdown or have spelt the function name wrong. An option would be to switch to using $w(“#dropdown”).onChange((event) => {
Where dropdown is the id of your first dropdown menu.
Though if you want a completely different way to achieve this you can use selectedIndex and do something like this:
$w(“#dropdown”).onChange(() => {
const dropdownSelIndex = $w(“#dropdown”).selectedIndex;
if (dropdownSelIndex === 0) {
$w(‘dropdown2’).show();
} else if (dropdownSelIndex === 1) {
$w(‘dropdown2’).hide();
}
});
Each selected index number corresponds the the dropdown’s options.
I tried to put # in front of “dropdown2” but it still will not work.
I thought that I would be able to use the code that the (Wix) account wrote in the post i linked in the first post, and then change the name of the dropdown menues and values, but clearly im missing somthing.
If I accedentaly deleted the event handler from the drop down menu, how do I get it back/enable it again?
Thank you so much for you sugestion and code.
unfortunately, I could not get the code that you sugested to work eather. Do I need to import the function first?
I tried this both with and without “quotation marks” around the dropdown options:
$w("#dropdown1").onChange(() => {
const dropdownSelIndex = $w("#dropdown1").selectedIndex;
if (dropdownSelIndex === pipes) {
$w('#dropdown2').show();
} else if (dropdownSelIndex === ventilation) {
$w('#dropdown2').hide();
}
});
Sorry, I should have been more clear. For the selectedIndex you don’t make it equal to the value of the dropdown item, but rather the number of that item. For example if the dropdown has three options, say pipes, ventilation, and ladder in that order, then you would do:
if (dropdownSelIndex === 1) {
Which would correspond to the first option of the dropdown, which would be pipes. If you wanted to do the code for the third option which is ladder, you would use :
if (dropdownSelIndex === 3) {
I’ll attach a video of how to make sure you have the event handler enabled for your dropdown.
Another reason why your initial code may not have worked is because you may not have set the value of the dropdown item to pipes but just the label. I’ll attach a video to show that aswell
Thank you for continuing to helping me, it is much appriciated 
I now enabled the event handler, but it did not change much.
The sorting it self workes just fine and all the lables and values are matching.
I enabled the event handler on both drop down menues becous I was not sure about which one to do it on. I tried it one at a time, " dropdown1_change" and “dropdown2_change”, and also both at the same time.
I took some videos using the different codes and methods, maybe you can spot where I did wrong.
.
Looks like you are missing a line of code
export function dropdown1_change(event) {
let value = event.target.value ;
if(value === ‘pipes’) {
$w(‘#dropdown2’).show();
}
else {
$w(‘#dropdown2’).hide();
}
}
If you are needing even more dropdown’s for each different option (pipes, ventilation, cable ladder, and walls) you can use else ifs like this
export function dropdown1_change(event) {
let value = event.target.value ;
if(value === ‘pipes’) {
…
}
else if (value === ‘cable ladder’){
…
}
else if (value === ‘ventilation’){
…
}
else if (value ===’ walls’) {
…
}
}
