cancel
Showing results for 
Search instead for 
Did you mean: 

javascript and html drop-down menu

Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

javascript and html drop-down menu

i've got 2 drop-down menus on a webpage
the first drop-down is a set of options.
the second drop-down displays a range of options based on what the first drop-down selection is.

this is done via a set of "lookup" files trigged by a bit a javascript

$(function() {
	$("#menu1").change(function() {
		$("#menu2").load("lookupfiles/" + $(this).val() + ".txt");
	});
});


this all works fine if the values of menu1 are numbers (ie 1,2,3,4 etc etc).
they correspond to 1.txt, 2.txt etc etc
all good so far.

it also works OK if the value is text and has no spaces in it.
example "selectedoption" successfully loads the options from "selectedoption.txt".

however, if the value of menu1 is some text with a space in it.. ie "selected option", the script doesn't seem to be able to supply the set of options from the lookup file called "selected option.txt".

now, due to integration issues with an existing system, then menu options have to stay as they are (with text and spaces etc).

is it possible to get this working with the spaces in the options?

4 REPLIES
Community Veteran
Posts: 4,975
Thanks: 1,152
Fixes: 28
Registered: 16-10-2014

Re: javascript and html drop-down menu

@chenks76 - I would suspect you'll have to encode the spaces using %20.

Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

Re: javascript and html drop-down menu

i suspected as much, but therein lies the problem.
as the values for the first menu are pulled in from the existing system i cannot change them.

so i guess i would need to encode the space after it exists in the menu and before it hits the javascript

the orginal drop-down is populated thus

<select name="root" id="root">
    <% WHILE (NOT root.EOF) %>
        <option value="<%=root.Fields("callmd3_listitem").value %>">
<%=root.Fields("callmd3_listitem").value %>
</option>
<% root.movenext()
Wend %>
</select>
Community Veteran
Posts: 4,975
Thanks: 1,152
Fixes: 28
Registered: 16-10-2014

Re: javascript and html drop-down menu

For Classic ASP try:

<select name="root" id="root">
    <% WHILE (NOT root.EOF) %>
        <option value="<%=Server.HTMLEncode(root.Fields("callmd3_listitem").value) %>">
<%=root.Fields("callmd3_listitem").value %>
</option>
<% root.movenext()
Wend %>
</select>

 

Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

Re: javascript and html drop-down menu

just as you typed that i worked out to solve it in javascript too (i think)

 

$(function() {
	$("#menu1").change(function() {
		$("#menu2").load("lookupfiles/" + encodeURIComponent($(this).val().trim()) + ".txt");
	});
});