Dynamic Select Menu issue for beginner!!

[Richard7452343]

Hi,

How do I add additional items on a dynamic select menu. I have used the following code which works for two labels, however, when i add a third label on list 1 and add the required labels on list 2 I get all the list 2 labels from the fruits. The list 1 vegetables works fine.

This cose works:

var selectedValue = this.value;
var data = { 'Fruits': ['Orange', 'Apple', 'Banana'],
'Vegetables': ['Onion', 'Carrot', 'Tomato']
};

var dropDown = $('[name=list2]');
dropDown.html('');
var newData = data[selectedValue];
for(i = 0; i < newData.length; i++) {
dropDown.append('​' + newData + '');
}
dropDown.selectmenu('refresh');

When I try this it doesn't work as intended:

var selectedValue = this.value;
var data = { 'Fruits': ['Orange', 'Apple', 'Banana'],
'Vegetables': ['Onion', 'Carrot', 'Tomato'],
'Fish': ['Cod', 'Bass', 'Salmon'}
};

var dropDown = $('[name=list2]');
dropDown.html('');
var newData = data[selectedValue];
for(i = 0; i < newData.length; i++) {
dropDown.append('​' + newData + '');
}
dropDown.selectmenu('refresh');

Can someone please assist and show how the code should be and why, it would really help with my understanding.

Regards

Richard

Also, are there any limitations to the number of list 1 labels you can add??

Thanks in advance!!!

[Egor Kotov6832188]

Hello Richard.

If your data is static, then you could did all this simpler way, instead of doing all this coding.

Appery.io provides Model&Storage functionality which helps user map any structure to a page, by simply dragging structure's elements to a page.

1) Create your model
2) Create storage variable
3) fill you storage variable with value
4) Map all to a page

[Richard7452343]

Hi Egor,

Thanks for your reply, although i'm still struggling to do want i want to do which I believe should be a simple task. Essentially I want to sort vehicles into the following drop down menus and then add as many as I need.

So:

list 1 would be MAKE - once you have identified your make the only options available would be those listed under that make. i.e. if you choose Ford you can only select ESCORT, MONDEO or FIESTA from list 2
list 2 would be MODEL - once you have chosen your model you can then only choose the type of models from the model selected from list 2 i.e. Mark 1 or Mark 2.

Once this has been done and submitted, I would like these details to be sent to me either by an alert or email for viewing.

e.g.

Make:
A - Ford
1 - escort
a - mark 1
b - mark 2
2 - mondeo
3 - fiesta

Code: Select all

      Volkswagen 
            1 - golf 
            2 - polo 
                     a - match 
                     b - finesse 
                             1 - 1.6L 
                             2 - 1.8GL 
                     c - elegance 
            3 - passat 

      Rangerover 
            1 - Freelander 
            2 - rangerover 
            3 - landrover 

SUBMIT BUTTON - details inputted above are sent to me to act upon.

Hopefully the above make sense and you can see what i'm trying to achieve, if so, what is the simplest way to do this and you be able to show me the way I would do this for the first three, once I see the logic and how it maps I can do the rest myself, your help would be much appreciated.

regards

Richard

[Richard7452343]

This visual might assist the above

[Richard7452343]

I'm still struggling with this can someone from technical assist please.

[Richard7452343]

Hi Egor, can you assist please, i'm stuck at the moment

[Egor Kotov6832188]

Richard,

Could you clarify, what exactly you are struggling with ?
It's not clear for me where did you stuck.

[Richard7452343]

Egor,

Strangely, it appears to be working now????

Does the following code look correct to you?, will this work if I add additional vehicles??

Thanks

[Yurii Orishchuk]

Hi Richard,

Should work, but i suggest you to change ".html()" line code with following:

pre

jQuery('[name="mobileselectmenu_30"] option')&#46;remove();

/pre

Regards.