How to autofill associated drop-down/select lists?

[doga...@gmail.com]

In some web sites, there are multiple select lists or dropdowns which are depends to each other. For example Country - State - City. These drop downs are populated after parent item is selected. So they are not autofilled by the addon. How can we set rule for all this dropdowns are selected by value after they are populated in parent child order.

[thdoan]

For more complex forms such as the one you mentioned, you can use the new Type = JavaScript rules. For example, let's assume there's a form that has Country and State dropdowns, and the State is only populated once the Country is chosen:

<select name="country">...</select>

<select name="state">...</select>

Let's say we ultimately want to select these options:

<select name="country"><option value="us">United States</option></select>

<select name="state"><option value="ca">California</option></select>

If you create two normal autofill rules, then the State would probably not get autofilled because Autofill works too fast, so when Country is autofilled the State field would not match because it would not be populated with US states, yet. Here's how to work around this using a JavaScript rule:

/* Select the country */

document.querySelector('select[name=country]').value = 'us';

/* Wait for half a second (500 ms), then autofill the State field */

setTimeout(function() {

  document.querySelector('select[name=state]').value = 'ca';

}, 500);

You can change the delay time until you find a value that consistently works for you.

[Sam Choi]

i found by using querySelector, then it cannot execute "onchange" event of the "select" form. 

Anything can improve?


thdoan於 2016年1月21日星期四 UTC+8上午1時25分40秒寫道：

[thdoan]

Hi Sam, you can manually trigger events using JavaScript.