Hide drop down list based on value of another drop down list

Ask the community
,
1

hello all
lets say i have a drop down list (its name = typeddl) with 2 item House and Car
and i have another drop down list for car model and another one for house type

now what i want is: when i choose House from the 1st dropdwon list , hide the cars model drop down list and show the house type drop down list…

i tried this below but didnt work

export function typeddl_change(event, $w) {

//Add your code for this event here:

if ( this .value === ‘1’)
{
$w(‘#carddl’).show(‘’);
$w(‘#houseddl’).hide(‘’);
}
else
{
$w(‘#carddl’).hide(‘’);
$w(‘#yearddl’).show(‘’);
}
}

i hope you got my point
many thanks

2

Hi,

The Cascading Form example does pretty much what you want. You can start with that and then modify it for your own use.

Good luck,

Yisrael

3

Thanks a lot for reply
i already used cascading to filter my second drop down list ,
but my design requires to hide the drop down completely
for example if i choose car in the first drop down i need 3 drop down lists , one for year , one for make and one for model… but when i choose house i need one dropdown list for type of houses …
i hope you got me …
many thanks

4

You are not retrieving the selected value correctly. You need to do something like this:

export function typeddl_change(event, $w) {
   let value = event.target.value;
   if(value === '1') {
      $w('#carddl').show();
      $w('#houseddl').hide();
   }
   else {
      $w('#carddl').hide();
      $w('#yearddl').show();
   }
}

Good luck,

Yisrael

5

Thanks a lot Yisrael, this still not work :frowning: please i need this so much

regards

6

i found this working example on internet which is done with juqery , but i dont know how to make it work with my wix website :

Do you have Passport?

No Yes
Passport Number:
7

jQuery won’t work inside of Wix Code.

Please post the URL of your site and I’ll take a look. Only authorized Wix personnel can get access to your site in the editor.

8

thanks a lot for your help, here is the link Show Hide DIV with TextBox based on DropDownList Selected Value (Selection) using JavaScript and jQuery

9

What is the URL of your site?

10

aha sorry for misunderstanding , i have a copy of my actual site, in order to do the tests and migrate it when its success ,
here is the site where im doing the test on it

11

What page do you need help with?

12

Hey Siyamand,

I found the following code on your CarsModel page:

export function typeddl_change(event, $w) {

 //Add your code for this event here: 

 if ($w(this).val() === "1") {
        $w('#yearddl').show();
    } else {
        $w('#yearddl').hide();
    }
}

This is not valid Wix Code and simply will not work. You will need to rewrite it in valid Wix Code as I showed in a previous post.

Refer to the Wix Code docs for details.

Good luck,

Yisrael

13

thanks a lot for your continuous support, actually i tried your code too didn’t work, so i google it and i tired this also didn’t work…

im new to wix and code , could you please test on my site which code will do the work for me…

many thanks

14

i tried this code still not working , and im not getting any errors :

export function typeddl_change(event, $w) {
let value = event.target.value;
if (value === ‘1’) {
$w(‘#yearddl’).show();

}
else {
$w(‘#yearddl’).hide();

}
}

15

at the end now is working but i used this code below :

export function typeddl_change(event, $w) {
let value = event.target.value;
if (value === ‘2’) {
$w(‘#yearddl’).hide();

}
else {
$w(‘#yearddl’).show();

}
}

valu no 2 is the second option in the drop down list !!! this a bit confusing

16

You need to compare the actual value returned by the dropdown ( House , Car ):

export function typeddl_change(event, $w) {
   let value = event.target.value;
   if(value === 'House') {
      $w('#yearddl').show();
   }
   else {
      $w('#yearddl').hide();
   }
}

See the Dropdown API for more information.

17

does === mean if not equal ?!, if yeas so the issue was that from the first place , thats why i thought your code is not working for me …

18

The === operator means: equal value and equal type

Did you try my code?

19

yes, its working :slight_smile: thanks a lot , but the thing i dont get it …
if the selection = house , it suppose to hide the year ddl ( the first part of if should work ) but it work the other way