I am working on a web page that includes a cascaded dropdown feature. The data in the second dropdown appears to be generated via ajax based on the selection made in the first dropdown. Here is the code for the first select option:
<select class="form-control input-sm" name="aff_network_id" id="aff_network_id" onchange="load_aff_campaign_id($(this).val(), 0); load_landing_page(this.value); load_text_ad_id(this.value);">
<option value="0"> -- </option>
<option value="1">Sales</option>
</select>
As for the code related to the second select option, it looks like this:
<select class="form-control input-sm" name="aff_campaign_id" id="aff_campaign_id" onchange="load_text_ad_id(this.value); if($('#landing_page_style_type')){load_landing_page( $('#aff_campaign_id option:selected').val(), 0, $('input:radio[name=landing_page_type]:checked').val()?$('input:radio[name=landing_page_type]:checked').val():'landingpage');} if($('#unsecure_pixel').length != 0) { change_pixel_data();}">
<option value="0"> -- </option>
<option value="1">iPhone on Amazon · $100.00</option>
</select>
When attempting to modify the value of the second select using WebDriver and JavascriptExecutor, such as shown below, the value does not actually change:
WebDriver driver=new FirefoxDriver();
JavascriptExecutor js=null;
if (driver instanceof JavascriptExecutor) {
js = (JavascriptExecutor)driver;
}
js.executeScript("document.getElementById('aff_campaign_id').value='1';" +
"return document.getElementById('aff_campaign_id').value;")
The above statement always returns "--", which is the default value. Is there another approach that could be taken to successfully update the selected value in the cascaded dropdown?