E-mail List Archives
Thread: sequential select with ajax
Number of posts in this thread: 6 (In chronological order)
From:
Date: Wed, Feb 13 2019 2:10AM
Subject: sequential select with ajax
No previous message | Next message →
Hi,
I would like to ask you a little help.
I am working on a webpage. I have a form with 2 <select> elements. At
the beginning, only one select is on the list, because the second select
menu's item depends on the first selection. I use AJAX to create the
second list after user selected one item from the first list. TheÂ
screen reader is not noticing the second select menu. Is there any
solution in order to make the second select menu usable by
screen-reader users? Maybe is there an accessible jQuery plugin for that?
Regards, Zsolt
From: Brian Kardell
Date: Wed, Feb 13 2019 8:17AM
Subject: Re: sequential select with ajax
← Previous message | Next message →
Can you explain what you mean by the screen reader isn't noticing it?
Brian Kardell
https://bkardell.com
@kardellbrian
On Wed, Feb 13, 2019, 4:10 AM Edelényi Zsolt < = EMAIL ADDRESS REMOVED = wrote:
> Hi,
>
> I would like to ask you a little help.
>
> I am working on a webpage. I have a form with 2 <select> elements. At
> the beginning, only one select is on the list, because the second select
> menu's item depends on the first selection. I use AJAX to create the
> second list after user selected one item from the first list. The
> screen reader is not noticing the second select menu. Is there any
> solution in order to make the second select menu usable by
> screen-reader users? Maybe is there an accessible jQuery plugin for that?
>
> Regards, Zsolt
>
>
>
>
> > > > >
From: glen walker
Date: Wed, Feb 13 2019 10:19AM
Subject: Re: sequential select with ajax
← Previous message | Next message →
So both <select> elements exist on the page at page load time? The first
<select> has <option> elements but the second one does not? And then you
dynamically create <option> elements for the second based on what was
chosen in the first?
From:
Date: Wed, Feb 13 2019 8:31PM
Subject: Re: sequential select with ajax
← Previous message | Next message →
Yes, exactly.
On 2019. 02. 13. 18:19, glen walker wrote:
> So both <select> elements exist on the page at page load time? The first
> <select> has <option> elements but the second one does not? And then you
> dynamically create <option> elements for the second based on what was
> chosen in the first?
> > > >
From: Isabel Holdsworth
Date: Mon, Feb 18 2019 4:53AM
Subject: Re: sequential select with ajax
← Previous message | Next message →
Hi Zsolt,
It works fine for me using JAWS or NVDA in Chrome 72.
Both select boxes are present and enabled on the page on load.
When a "change" event is detected on the first select box, the second
one is emptied and repopulated.
JAWS and NVDA can see and change the content of both boxes.
If the second <select> element was not present on page load, and was
created only after a "change" event was detected on the first
<select>, perhaps the outcome would be different.
Which browser and screenreader are you testing with?
I'll paste my test code (HTML+JS+jQuery, uncommented) at the bottom of
this message, but it may get stripped out.
Cheers, Isabel
<!doctype html>
<html lang="en">
<head>
<title>Second select on populate first</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
var cities = {
England: ["London", "York", "Leicester"],
Scotland: ["Edinburgh", "Glasgow", "Inverness"],
Wales: ["Cardiff", "Swansea", "Newport"]
};
$("#sel1").change(function(e){
$("#sel2").empty();
if ($(this).val() == "") {
$("#sel2").append("<option value=''>Choose a city</option>");
} else {
$("#sel2").append("<option value=''>Choose a city in " + $(this).val()
+ "</option>");
let myCity = cities[$(this).val()];
for (city in myCity) {
$("#sel2").append("<option>" + myCity[city] + "</option>");
} //for
} //if
});
});
</script>
</head>
<body>
<h1>Second select on populate first</h1>
<p>
<label for="sel1">Country</label>
<select id="sel1">
<option value="">Choose a country</option>
<option>England</option>
<option>Scotland</option>
<option>Wales</option>
</select>
</p>
<p>
<label for="sel2">City</label>
<select id="sel2">
<option vallue="">Choose a city</option>
</select>
</p>
</body>
</html>
On 14/02/2019, Edelényi Zsolt < = EMAIL ADDRESS REMOVED = > wrote:
> Yes, exactly.
>
> On 2019. 02. 13. 18:19, glen walker wrote:
>> So both <select> elements exist on the page at page load time? The first
>> <select> has <option> elements but the second one does not? And then you
>> dynamically create <option> elements for the second based on what was
>> chosen in the first?
>> >> >> >> > > > > >
From:
Date: Wed, Feb 20 2019 7:06AM
Subject: Re: sequential select with ajax
← Previous message | No next message
Dear Isabel,
This is great. Thank you!
Zsolt
On 2019. 02. 18. 12:53, Isabel Holdsworth wrote:
> Hi Zsolt,
>
> It works fine for me using JAWS or NVDA in Chrome 72.
>
> Both select boxes are present and enabled on the page on load.
> When a "change" event is detected on the first select box, the second
> one is emptied and repopulated.
> JAWS and NVDA can see and change the content of both boxes.
>
> If the second <select> element was not present on page load, and was
> created only after a "change" event was detected on the first
> <select>, perhaps the outcome would be different.
>
> Which browser and screenreader are you testing with?
>
> I'll paste my test code (HTML+JS+jQuery, uncommented) at the bottom of
> this message, but it may get stripped out.
>
> Cheers, Isabel
>
> <!doctype html>
> <html lang="en">
> <head>
> <title>Second select on populate first</title>
> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
> <script>
> $(function(){
> var cities = {
> England: ["London", "York", "Leicester"],
> Scotland: ["Edinburgh", "Glasgow", "Inverness"],
> Wales: ["Cardiff", "Swansea", "Newport"]
> };
> $("#sel1").change(function(e){
> $("#sel2").empty();
>
> if ($(this).val() == "") {
> $("#sel2").append("<option value=''>Choose a city</option>");
> } else {
> $("#sel2").append("<option value=''>Choose a city in " + $(this).val()
> + "</option>");
> let myCity = cities[$(this).val()];
> for (city in myCity) {
> $("#sel2").append("<option>" + myCity[city] + "</option>");
> } //for
> } //if
> });
> });
> </script>
> </head>
> <body>
> <h1>Second select on populate first</h1>
> <p>
> <label for="sel1">Country</label>
> <select id="sel1">
> <option value="">Choose a country</option>
> <option>England</option>
> <option>Scotland</option>
> <option>Wales</option>
> </select>
> </p>
> <p>
> <label for="sel2">City</label>
> <select id="sel2">
> <option vallue="">Choose a city</option>
> </select>
> </p>
> </body>
> </html>
>
> On 14/02/2019, Edelényi Zsolt < = EMAIL ADDRESS REMOVED = > wrote:
>> Yes, exactly.
>>
>> On 2019. 02. 13. 18:19, glen walker wrote:
>>> So both <select> elements exist on the page at page load time? The first
>>> <select> has <option> elements but the second one does not? And then you
>>> dynamically create <option> elements for the second based on what was
>>> chosen in the first?
>>> >>> >>> >>> >> >> >> >> >>
> > > >