Форум

PostGet · #1 (**permalink**) 20.09.2011, 13:53

скрипт тут

<div id="content"></div>
<script>  
        $(document).ready(function(){  
          
          
              
      $('#btn2').change(function(){  
                $.ajax({  
                    url: "page2.html",  
                    cache: false,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            });  
              
        });  
    </script>

селект тут:

<option val="apl">Яблоко</option>
<option val="din">Дыня</option>

Надо что бы на клик по селекту"Яблоко" загружалась page2.php на место <div id="content"></div>
Надеюсь на помощь

melky · #2 (**permalink**) 20.09.2011, 14:02

перед $.ajax

if( this.value == "apl" )

Black_Prince · #3 (**permalink**) 20.09.2011, 14:02

судя по коду - должно работать... если конечно идентификатор селекта совпадает.

Или вы имеете ввиду, что нужно проверить значение выбранной option из select?

PostGet · #4 (**permalink**) 20.09.2011, 15:34

Вот и я думаю что должно все работать,только вот не срабатывает =)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>  
        $(document).ready(function(){  
          
          
              
      $('#apl').change(function(){  
    	  if( this.value == "apl" )     $.ajax({  
                    url: "inc.php",  
                    cache: false,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            });  
              
        });  
    </script>

<title>Insert title here</title>
</head>
<body>
  <select name="Menu">
<option value="apl">Яблоко</option>
<option value="din">Дыня</option>
</select>
<div id="content"></div>
	
</body>
</html>

walik · #5 (**permalink**) 20.09.2011, 15:59

Вы вешаете событие на элемент с ID = "apl" Но у селекта вашего нет такого ID

PostGet · #6 (**permalink**) 21.09.2011, 10:27

Заработало,поставил два условия с селектом...

<script>  
        $(document).ready(function(){  
          
          
              
      $('#fruit').change(function(){  
    	  if( $(this).val() == "apl" ){
        	   $.ajax({  
                    url: "page1.php",  
                    cache: false,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            }else if($(this).val() == "din"){
            	$.ajax({  
                    url: "page2.php",  
                    cache: false,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            }  
        });

        });  
    </script>

AlertMod · #7 (**permalink**) 18.03.2013, 04:30

А вот если у меня на этих страницах присутствует javascript подскажите пожалуйста как сделать так чтобы при загрузке как бы происходила перезагрузка страницы и скрипты работали, в моем случае это яндекс карты...

danik.js · #8 (**permalink**) 18.03.2013, 05:21

Скрипты вставленные через innerHTML (что делает jquery-метод html()) не исполняются. Как вариант можно пройти по всем тегам <script>, изъять из DOM-а и вновь вставить (может и изымать не придется). Если в скриптах используется document.write то это провал.

if( $(this).val() == "apl" ){
               $.ajax({ 
                    url: "page1.php", 
                    cache: false, 
                    success: function(html){ 
                        $("#content").html(html); 
                    } 
                }); 
            }else if($(this).val() == "din"){
                $.ajax({ 
                    url: "page2.php", 
                    cache: false, 
                    success: function(html){ 
                        $("#content").html(html); 
                    } 
                }); 
            }

Этот код ужимается до:

var routes = {apl: 'page1.php', din: 'page2.php'};
    $.ajax({ 
        url: routes[this.value], 
        cache: false, 
        success: function(html){ 
            $("#content").html(html); 
        } 
    });

AlertMod · #9 (**permalink**) 18.03.2013, 06:28

Форум

Справочник

Discord чат

Курсы javascript