how to search dropdown list with URL values without page refresh using javascript?

Question

i want to search dropdown list values without page refreshing. following code is working fine. when i select dropdown option it is redirect to related url value. but my requirement is when i select dropdown option and click on submit button then related url will search without page refresh.

code

<select name="menu1" id="menu1">
<option value="">Select your choice...</option>
<option value="https://free.greenhouse.com/tree/list/cucumber">Cucumber</option>
<option value="https://free.greenhouse.com/tree/list/tulasi">Tulasi</option>
<option value="https://free.greenhouse.com/tree/amond">Amond</option>
<option value="https://free.greenhouse.com/tree/list/awala">Awala</option>
</select>
</br></br>
<script type="text/javascript">
 var urlmenu = document.getElementById( 'menu1' );
 urlmenu.onchange = function() {
 window.open( this.options[ this.selectedIndex ].value,"_self" );
 };
</script> 

Answer 1

You will require to use Ajax functionality for this.

<div id="result"><select name="menu1" id="menu1">
<option value="">Select your choice...</option>
<option value="https://free.greenhouse.com/tree/list/cucumber">Cucumber</option>
<option value="https://free.greenhouse.com/tree/list/tulasi">Tulasi</option>
<option value="https://free.greenhouse.com/tree/amond">Amond</option>
<option value="https://free.greenhouse.com/tree/list/awala">Awala</option>
</select>
</br></br><button id="getPage" type="button" value="Submit">Submit</button></div>
<script type="text/javascript">
var urlmenu = document.getElementById( 'getPage' );
var selectBox = document.getElementById( 'menu1' );
urlmenu.onclick = function() {
 if(selectBox.options[ selectBox.selectedIndex ].value){
 jQuery.get( selectBox.options[ selectBox.selectedIndex ].value, function( data ) {
 jQuery( "body" ).html( data );
 });
 }else{ alert ("Please select value.")}
};
</script>

• Neeya: it showing expected result but when i click on dropdown option browser url not showing url which are assign to option values. and after searching it showing dropdown two times. i want to search dropdown option value after select option then click on submit button the related option value should be search without page refresh.
• Neeya: Have any idea.........?
• Jaimin Sutariya: Please check updated code.
• Neeya: TypeError: jQuery.easing[jQuery.easing.def] is not a function
• Neeya: XML Parsing Error: no root element found Location: free.greenhouse.com