페이지를 동적으로 제어하는 ​​데 도움이 필요합니다.

Question

사용자가 "내 컴퓨터는 몇 살입니까?"와 같은 페이지를 만들려고합니다. - "1 년", "2 년"등 등 페이지를 제거하고 옵션을 추가합니다 (현재 텍스트의 유익한 섹션 일 필요가 있습니다)

그런 식으로 할 수있는 방법이 있습니까?

내가 사용하는 기술은 물론 PHP, HTML 및 CSS로 페이지 스타일을 지정합니다.

미리 감사드립니다.

Answer 1

PHP는 페이지에 변경 사항이 있는지 검색 할 수 없으므로이를 위해 자바 스크립트를 사용해야합니다.

당신이 HTML select 요소를 사용하는 경우 당신은 동적으로이 같은 것을 볼 수있는 컨텐츠를 만들려면 :
HTML을

<select id="computerAge"> 
    <option>2 years</option> 
    <option>3 years</option> 
</select> 

<div id="dynamicContent"> 
</div> 

자바 스크립트

var computerAge = document.getElementById('computerAge'); 
var dynamicContent = document.getElementById('dynamicContent'); 

computerAge.onchange = function() 
{ 
    // Get a list of the current dynamic content 
    var contents = document.getElementById('content').document.getElementsByTagname('p'); 

    // Remove current dynamic content 
    for(i = 0; i < contents.length; i++) 
    { 
     dynamicContent.removeChild(contents[i]); 
    } 

    // Create new dynamic content 
    var dynamicP = document.createElement('p'); 

    if(computerAge.value == '2 years') 
    { 
     dynamicP.innerHTML = 'Content for 2 year old computer'; 
     dynamicContent.appendChild(dynamicP); 
    } 
    elseif(computerAge.value == '3 years') 
    { 
     dynamicP.innerHTML = 'Content for 3 year old computer'; 
     dyanmicContent.appendChild(dynamicP); 
    } 
} 

또는 요소를 동적으로 생성하지 않는 경우 :

HTML

<select id="computerAge"> 
    <option>2_years</option> 
    <option>3_years</option> 
</select> 

<div id="content"> 
    <div id="2_years" style="display: none"> 
     <p>Content for 2 year old computer</p> 
    </div> 

    <div id="3_years" style="display: none"> 
     <p>Content for 3 year old computer</p> 
    </div> 
</div> 

자바 스크립트

function init() 
{ 
    // Get the select element 
    var select = document.getElementById('computerAge'); 

    select.onchange = function() 
    { 
     // Get the elements which could be the dynamic content 
     var content = document.getElementById('content') 
     var contents = content.getElementsByTagName('div'); 

     // Iterate over contents; make selected visible and hide others 
     for(i = 0; i < contents.length; i++) 
     { 
      if(contents[i].id == select.value) 
      { 
       contents[i].style.display = 'block'; 
      } 
      else 
      { 
       contents[i].style.display = 'none'; 
      } 
     } 
    } 
} 

window.onload = init; 

Answer 2

나는 당신이 몇 가지 물건을 함께 섞고 있다고 생각합니다. 사용자가 드롭 다운에서 선택한 내용에 따라 페이지의 일부분을 표시하거나 숨기고 싶다는 것을 이해합니다.

PHP는 "동적 웹 페이지"를 만듭니다. 그러나 이것에 의한 것은 페이지가 각 요청에 대해 다른 내용을 제공 할 수 있다는 것입니다. 그러나 일단 컨텐트가 제공되면 클라이언트 쪽에서는 렌더링되지만 PHP에서는 더 이상 렌더링되지 않습니다.

전체 페이지를 다시로드하지 않고 내용을 변경하려면 javascript를 사용해야합니다.
아약스를 사용하여 새 콘텐츠를 서버 할 수도 있지만 일부 div의 display 속성을 none 또는 그와 비슷한 것으로 지정하고 싶습니다.