i want fetch json data when option of select selected javascript code
var root = 'http://jsonplaceholder.typicode.com/posts'; $(function(){ var log = $('#log'); $('#comment').alwayschange(function(val){ print('selected '+ val); $.ajax({ url: root, method: 'get' }).then(function(data) { console.log(data); }); }); function print(text){ log.prepend('<p>' + text + '</p>'); } }); $.fn.alwayschange = function(callback){ return this.filter('#comment').each(function(){ var elem = this; var $this = $(this); $this.change(function(){ callback($this.val()); }).focus(function(){ elem.selectedindex = -1; elem.blur(); }); }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="comment"> <option>select...</option> <option>yes</option> <option>no</option> </select> <br/> <div id="log"></div>the above code working wanted, want have 2 <select> elements
<select id="num"> <option>select...</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <br/> <select id="comment"> <option>select...</option> <option>yes</option> <option>no</option> </select> after want value of selected <option> of select element id #num , build ajax url
var root = 'http://jsonplaceholder.typicode.com/posts' + "value of selected `<option>` of select element id `#num`" + "if value of selected `<option>` of select element id `#comment` 'yes' add '/comments' @ end of url else nothing added"; i have tried in way
var root = 'http://jsonplaceholder.typicode.com/posts'; $(function(){ var log = $('#log'); $('#comment').alwayschange(function(val){ if(val == "yes"){ $.ajax({ url: root+"/"+$('#num option:selected').text() + "/comments", method: 'get' }).then(function(data) { console.log(data); }); }else{ $.ajax({ url: root, method: 'get' }).then(function(data) { console.log(data); }); } }); function print(text){ log.prepend('<p>' + text + '</p>'); } }); $.fn.alwayschange = function(callback){ return this.filter('#drop-location').each(function(){ var elem = this; var $this = $(this); $this.change(function(){ callback($this.val()); }).focus(function(){ elem.selectedindex = -1; elem.blur(); }); }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="num"> <option>select...</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <br/> <select id="comment"> <option>select...</option> <option>yes</option> <option>no</option> </select> <br/> <div id="log"></div>but above code not work
change #drop-location #comment
see:
var root = 'http://jsonplaceholder.typicode.com/posts'; $(function(){ var log = $('#log'); $('#comment').alwayschange(function(val){ if(val == "yes"){ $.ajax({ url: root+"/"+$('#num option:selected').text() + "/comments", method: 'get' }).then(function(data) { console.log(data); }); }else{ $.ajax({ url: root, method: 'get' }).then(function(data) { console.log(data); }); } }); function print(text){ log.prepend('<p>' + text + '</p>'); } }); $.fn.alwayschange = function(callback){ this.filter('#comment').each(function(){ var elem = this; var $this = $(this); $this.change(function(){ callback($this.val()); }).focus(function(){ elem.selectedindex = -1; elem.blur(); }); }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="num"> <option>select...</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <br/> <select id="comment"> <option>select...</option> <option>yes</option> <option>no</option> </select> <br/> <div id="log"></div>