다른 드롭 다운을 기반으로 한 동적 드롭 다운 업데이트

누군가가 올바른 방향으로 나를 조종하도록 도울 수 있기를 바랍니다. 현재 data.php를 호출 할 파일이 있습니다. 이 파일에서 나는 다음과 같은 데이터를 가지고 :다른 드롭 다운을 기반으로 한 동적 드롭 다운 업데이트

$sports_arr = array(); 
$sports_arr[] = "Basketball"; 
$sports_arr[] = "Baseball"; 
$sports_arr[] = "Football";

또한 같은 data.php 파일에 다음과 같은 배열을 가지고

문제는 내가이하는 방법을 알아 내려고 노력하고있다

$position = array(); 
$position['Basketball'][] = "Power Forward"; 
$position['Basketball'][] = "Small Forward"; 
$position['Basketball'][] = "Center"; 
$position['Soccer'][] = "Center Forward"; 
$position['Soccer'][] = "Right Wing"; 
$position['Soccer'][] = "Left Wing"; 
$position['Football'][] = "Halfback"; 
$position['Football'][] = "Fullback"; 
$position['Football'][] = "Wide Reciever"; 
$position['Football'][] = "Tight End"; 
$position['Football'][] = "Center";

현재 다음 코드를 채울 첫 번째 드롭 다운 : 나는 문제에 실행하고 어디

<div class="selectStyled"> 
    <select name="Sport1" class="styled"> 
    <option id="default" value="">Your Sport</option> 
     <?php natsort($sports_arr); 
     foreach ($sports_arr as $key => $val) { 
      echo "<option value='" . $val . "' id='position" . $key . "'>" . $val . "</option>"; 
     } ?> 
    </select> 
</div>

입니다. 내가 원하는 것은 위의 드롭 다운 결과 (예 : 사용자가 야구를 선택 함)를 기반으로하며 두 번째 이후 드롭 다운을 올바른 위치 배열로 채우기를 원합니다. 따라서 농구를 선택하면 두 번째 드롭 다운이 페이지에서 즉시 농구 위치와 동적으로 채워집니다. 그들이 마음을 바꾸고 Football을 선택하면 두 번째 드롭 다운을 축구 위치로 동적으로 채 웁니다.

여기에 도움을 주시면 감사하겠습니다. 나는 주요 도로 블록을 때리고있다. .. 고마워!!

출처

2013-04-10 lobstahcrushah

아약스를 사용하면됩니다. –

http://www.prodiven.com/jcombo/index.php?lang=en –

ajax 함수를 호출하고 관련 키를 전달하고 드롭 다운을로드하십시오. –

시도하십시오 :

<?php 
$sports_arr = array(); 
$sports_arr[] = "Basketball"; 
$sports_arr[] = "Baseball"; 
$sports_arr[] = "Football"; 

$position = array(); 
$position['Basketball'][] = "Power Forward"; 
$position['Basketball'][] = "Small Forward"; 
$position['Basketball'][] = "Center"; 
$position['Soccer'][] = "Center Forward"; 
$position['Soccer'][] = "Right Wing"; 
$position['Soccer'][] = "Left Wing"; 
$position['Football'][] = "Halfback"; 
$position['Football'][] = "Fullback"; 
$position['Football'][] = "Wide Reciever"; 
$position['Football'][] = "Tight End"; 
$position['Football'][] = "Center"; 
?> 

<div class="home"> 
    <select id="s1"> 
     <?php foreach($sports_arr as $sa) { ?> 
     <option value="<?php echo $sa; ?>"><?php echo $sa; ?></option> 
     <?php } ?> 
    </select> 
    <select id="s2"> 
    </select> 
</div> 

<script type="text/javascript"> 
var s1= document.getElementById("s1"); 
var s2 = document.getElementById("s2"); 
onchange(); //Change options after page load 
s1.onchange = onchange; // change options when s1 is changed 

function onchange() { 
    <?php foreach ($sports_arr as $sa) {?> 
     if (s1.value == '<?php echo $sa; ?>') { 
      option_html = ""; 
      <?php if (isset($position[$sa])) { ?> // Make sure position is exist 
       <?php foreach ($position[$sa] as $value) { ?> 
        option_html += "<option><?php echo $value; ?></option>"; 
       <?php } ?> 
      <?php } ?> 
      s2.innerHTML = option_html; 
     } 
    <?php } ?> 
} 
</script>

대부분의 시간, 사람들은 아약스를 사용하지만, 네트워크가 느린 경우, 아약스는 좋은 방법이 아니다.

출처

2013-04-10 05:32:56

환상적입니다! 도움을 많이 주셔서 감사합니다! 이 코드를 현재 코드베이스에 통합하는 작업에 착수합니다. 코드의 + 부분은 내가 배웠던 것입니다. 자세한 내용을 알기 위해 더 자세한 정보를 찾을 수있는 아이디어는 무엇입니까? Google에서 잘못된 검색어를 사용해야합니다. 다시 감사합니다 – lobstahcrushah

사용자가 첫 번째 드롭 다운에서 농구를 선택하면 농구 배열의 모든 기록이 두 번째 드롭 다운에 표시됩니다.

그래서 첫 번째 드롭 다운의 onChange() 이벤트에서 AJAX 함수를 사용해야합니다.

출처

2013-04-10 04:51:45

다른 드롭 다운을 기반으로 한 동적 드롭 다운 업데이트

답변

관련 문제