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>
Improve this question

1 Answer 1

Reset to default
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>
Improve this answer
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. Commented Feb 28, 2017 at 7:22
  • Have any idea.........? 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 Commented Feb 28, 2017 at 7:45
  • XML Parsing Error: no root element found Location: free.greenhouse.com 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.