javascript - html-jquery,selected option make visible next option -

i have form connected 2 select option.

now this:

<form>      <select onchange="this.form.submit()">          <option>1</option>          <option>2</option>          <option>3</option>          <option>4</option>      </select>      <select>          <option>please select first option</option>      </select>  </form>

after submit coming this:

<form>      <select onchange="this.form.submit()">          <option>1</option>          <option>2</option>          <option>3</option>          <option selected>4</option>      </select>      <select>         <option>41</option>         <option>42</option>         <option>43</option>         <option>44</option>      </select>  </form>

how can make without form submit call next selection data?

you can use javascript xmlhttprequest. if server gives response select options use code directly. else parse response , put inside select tag. js fiddle https://jsfiddle.net/w123ywdo/

<form>     <select onchange="changefirstselect(this)">         <option>1</option>         <option>2</option>         <option>3</option>         <option>4</option>     </select>     <select id="second">         <option>please select first option</option>     </select> </form> 

the js code is

var changefirstselect = function() {     var xhr = new xmlhttprequest();     xhr.onreadystatechange = function() {         if (xhr.readystate == xmlhttprequest.done) {             alert(xhr.responsetext);         }     }     xhr.open('get', 'http://example.com', true);     xhr.send(null); }