Dynamic loading of Jquery files

Question

Tell me how to implement this with

<form><select><option></option></select></form>

 <form> <input id="btn1" type="button" value="File1"> <input id="btn2" type="button" value="File2"> <input id="btn3" type="button" value="File3"> <input id="btn4" type="button" value="File4"> </form> <script> $(document).ready(function(){ $('#btn1').click(function(){ $.ajax({ url: "File1.php", cache: false, success: function(html){ $("#container").html(html); } }); }); $('#btn2').click(function(){ $.ajax({ url: "File2.php", cache: false, success: function(html){ $("#container").html(html); } }); }); $('#btn3').click(function(){ $.ajax({ url: "File3.php", cache: false, success: function(html){ $("#container").html(html); } }); }); $('#btn4').click(function(){ $.ajax({ url: "File4.php", cache: false, success: function(html){ $("#container").html(html); } }); }); }); </script>

If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer).

Answer 1 · 2016-12-20T11:39:54

Probably like this:

 $('select').on('change', function() {//слушаем, когда изменится значение селекта fileGet($(this).val());//при изменении вызываем функцию, с текущим(выбранным) значением селекта }); function fileGet(file) {//собссно тот же код, обернутый в функцию file = file + ".php"; console.log(file); $.ajax({ url: file, cache: false, success: function(html) { $("#container").html(html); } }); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <select> <option value='File1'>File1</option> <option value='File2'>File2</option> <option value='File3'>File3</option> </select> </form>

@ Andrei mb because your file name with a capital began, I have a lowercase.
@Andrey, I changed the code a bit, see what will be spamming to the console.
If the names in the console match the file names, the problem is in the request, but it was taken from your example

Dynamic loading of Jquery files

1 answer 1

More articles: