WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: sequential select with ajax

for

From: Isabel Holdsworth
Date: Feb 18, 2019 4:53AM

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