Dropdown list option selection not generating second dropdown list options

Question

Hi I'm new to javascript but I want to automate a simple web form which includes 2 dropdown lists. Upon the selection of an item in first dropdown list the second dropdown list should appear.

I used the following code to run in Chrome browser's console to select the value "Dubai" from the first drop down list:

document.querySelector(".trigger-section select").selectedIndex = 4;

But it only selects an option from first dropdown list and not generate the second dropdown list. The second dropdown list remains invisible.

When I click via mouse on an option in first dropdown list, the second list is generated without any problem. But when I run the script it only select an option from first and stops.

The following is the HTML code for the element of dropdown lists taken from InspectElement:

<triggersection mode="visibility" question="unrateable_explanation" class="trigger-section" webpage-id="unrateable_explanation" style="">
 <h4>Select the country</h4>
   <div style="margin:0 0 10px 20px">
    <listboxquestion name="unrateable_explanation" class="question-element list-box-question" webpage-id="unrateable_explanation" required-question="true">
     <aside>
      <div class="required-question-indicator">
      </div>
     </aside>
     <div>
      <select><option value="Select One">Select One</option>
       <option value="1">Norway</option>
       <option value="2">Ireland</option>
       <option value="3">India</option>
       <option value="4">Dubai</option>
      </select>
     </div>
    </listboxquestion>

 <triggersection mode="visibility" question="unrateable_explanation_dubai" class="trigger-section" webpage-id="unrateable_explanation_dubai" style="">
  <listboxquestion name="unrateable_explanation_dubai" class="question-element list-box-question" webpage-id="unrateable_explanation_dubai">
   <aside>
    <div class="required-question-indicator">
    </div>
   </aside>
   <div>
    <select>
     <option value="Select One">Select One</option>
     <option value="1">Seoul/option>
     <option value="2">Oocla</option>
     <option value="3">Pdpd</option>
     <option value="4">Algeria</option>
     <option value="5">Gaba</option>
     <option value="6">Adaq</option>
     <option value="0">Osmania</option>
    </select>
   </div>
  </listboxquestion>
 </triggersection>
</triggersection>

I have also noticed that this required-question="true" is not present when I click via mouse in the following code but it is present when I run the script.

<listboxquestion name="unrateable_explanation" class="question-element list-box-question" webpage-id="unrateable_explanation">

But it is present in the code when I try to access via javascript code in browser's console. Maybe by turning this to "false" will generate the second list, I'm not sure. I don't know how to do that. Also there is no "id" tag but a "webpage-id" tag, so I'm not sure if this can be used as "id" for an element.

I want to select the option from first list and that should generate the second list. Can somebody please recommend something that could resolve this issue?