0

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> 

1 Answer 1

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>
10
  • 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
    Commented Feb 28, 2017 at 7:22
  • Have any idea.........?
    – Neeya
    Commented Feb 28, 2017 at 7:41
  • Please check updated code. Commented Feb 28, 2017 at 7:42
  • TypeError: jQuery.easing[jQuery.easing.def] is not a function
    – Neeya
    Commented Feb 28, 2017 at 7:45
  • XML Parsing Error: no root element found Location: free.greenhouse.com
    – Neeya
    Commented Feb 28, 2017 at 7:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.