2014-04-08 2 views
0

아래는 제 간단한 자바 스크립트 기능입니다.html select에서 div를 채우기 위해 JQuery 함수를 작성하려면 어떻게해야합니까?

<html> 
    <head> 
    <script> 
     $(document).ready(function() { 
     $.get('getImage.php', function(data) { 
      $('#imageSelector').html("<select>" + data + "</select>"); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="imageSelector"> 
    </div> 

    <div id="imageArea"> 
    </div> 
    </body> 
</html> 

이것은 데이터를 가져 오는 데 사용되는 PHP 스크립트입니다.

<?php 
    include 'connect.php'; 

    $sql = "SELECT products_id, products_image FROM products"; 
    $query = mysqli_query($dbc, $sql); 
    while ($Array = mysqli_fetch_array($query, MYSQLI_ASSOC)) { 
    $imageEcho .= '<option value=' . $Array['products_id'] . '>' . $Array['products_image'] . '</option>'; 
    } 
    echo $imageEcho; 
?> 

다음은 이미지의 URL 경로를 완성하는 데 사용되는 기능입니다.

function getImage(image) { 
    document.getElementById("imageArea").innerHTML="<img src=../eoas/images/"+image+" alt='' />"; 
} 

어쩌면 나는 이렇게 할 수는 없지만 누군가가 알고 있는지 확인하려고 할 것 같았습니다.

+0

은'$ Array [ 'products_image']'이미지의 공개 URL입니까? –

+0

안녕하세요,이 질문에 답해 주셔서 감사합니다. 다음은 이미지의 위치에 대한 URL을 완성하는 데 사용하는 또 다른 기능입니다. 함수 getImage (image) { \t \t document.getElementById ("imageArea"). innerHTML = ""; \t} – user3512348

답변

1

당신은 다음과 같이 떨어지게해야

$(document).ready(function(){ 
     $.get("getImage.php", 
      function(data){ 
        $('#imageSelector').attr('src', data); 
     }); 
}); 

사용 크롬 개발자 도구 여기

아약스 대답에 그것을

에 대한 article입니다 그리고 사용하는 것이 훨씬 더 좋을 것이다 어떤 데이터 이해하기 JSON은 jsFiddle API를 사용하여

+0

live [데모] (http://jsfiddle.net/xzirrow/LPcYh/) jsFiddle -하지만 ** img ** inside ** 옵션 ** – xzirrow

+0

안녕하세요. 저는이 포럼에서 새로운입니다. 이 Add Comment 양식 필드에 코드를 붙여 넣을 수 있습니까? – user3512348

1

Example을 응답합니다.

$.get('getImage.php',function(data){ 
    // data = '<option value=...>...</option><option ...>...</option>...'; 
    $('<select>').html(data).appendTo('#imageSelector'); 
}); 
+0

감사합니다. jsFiddle을 사용해 보겠습니다. – user3512348

+0

안녕하세요, 저는이 질문을 잠시 게시했습니다. 이후 드롭 다운 메뉴를 제작하는 몇 가지 다른 방법을 시도하고 작동하는 기술을 발견했습니다. 이제 다음 코드로 만든 드롭 다운 메뉴에서 선택한 값을 전달해야합니다. – user3512348

+0

@ user3512348 : 가지고있는 것을 가지고 새로운 질문을 만드는 것이 좋습니다. 코드, 시도한 것, 현재 결과 및 원하는 결과를 표시하면 답변을 얻을 수 있습니다. 그러나이 질문에서 그렇게하지 않는 것이 가장 혼란 스럽기 쉽습니다. –

관련 문제