WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: sequential select with ajax

for

From: Date: Feb 20, 2019 7:06AM

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 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?
>>> >>> >>> >>> >> >> >> >> >>
> > > >