두 개의 드롭 다운 메뉴를 동적으로 채 웁니다.

Question

프로그래머 또는 코더가 아닙니다 (아래에서 확인할 수 있습니다). 네트워크 설명서를 작성합니다.

즉, 나는 HTML, PHP, CSS 등을 잘 알고있다. 그러나 다음은 완전히 완전히 난처한 상황입니다.

제 친구가 내 사이트를 만들려고 시도하고 있지만 그 밖의 모든 문제는 잘 해결되지만 최종 사용자를 다음으로 리디렉션해야합니다. 커뮤니티를 위해 특별히 제작 된 웹 페이지입니다.

최종 사용자가 레코드를 사용할 수있는 모든 상태를 나열하는 드롭 다운 메뉴를 클릭하는 방법입니다.이 메뉴는 첫 번째 메뉴 내의 옵션을 선택할 때 두 번째 메뉴는 해당 주 내의 커뮤니티를 (다시 MySQL을 통해) 채 웁니다.

유용 할 수도있는 것들을 인터넷에서 찾아 보았지만, 나는 코딩의 논리를 잘 갖추지 못했습니다. 그러나 내가 뭘 하려는지 (see here) 기본 버전을 보여주는 하나의 사이트를 찾았지만 MySQL과 함께 작동시키지 못합니다. 이것은 내가 지금까지 나는 곳이다 :

스크립트 -

<script> 
function swapOptions(ArrayName) { 
     var ExSelect = document.theForm.sites; 
     var theArray = eval(ArrayName); 
     setOptionText(ExSelect, theArray); 
    } 

function setOptionText(theSelect, theArray) { 
     for (loop = 0; loop < theSelect.options.length; loop++) { 
      theSelect.options[loop].text = theArray[loop]; 
     } 
    } 
</script> 

및 HTML -

가

<form name="theForm"> 
    <select name="chooseCat" onchange="swapOptions(this.options[selectedIndex].text);"> 
     <option value="">Please select your state ...</option>' 
       <?php 
        $query = mysql_query("SELECT DISTINCT state FROM sites ORDER BY state") 
          or die(mysql_error()); 
        while ($result = mysql_fetch_assoc($query)) { 
          $stateChoice = $result['state'];          
          echo '<option value="'; 
          echo "$stateChoice"; 
          echo '">'; 
          echo "$stateChoice"; 
          echo '</option>'; 
          echo '<br />';     
        } 
        ?> 
    </select> 
    <select name="sites" style="min-width: 100px;" onchange="location.href='reports.php?page=' + this.options[this.selectedIndex].value;"> 
        <?php 
        $query = mysql_query("SELECT * FROM sites") 
          or die(mysql_error()); 
        while ($result = mysql_fetch_assoc($query)) {          
          echo '<option value="'; 
          echo '">'; 
          echo $result['longname']; 
          echo '</option>'; 
          echo '<br />';     
         } 
        ?> 
    </select> 
</form> 

이 두 개의 드롭 다운을 반환합니다. 첫 번째는 사용 가능한 상태에 대한 쿼리 결과이며 드롭 다운에 사전 순으로 나열됩니다. 두 번째 사이트는 나열된 모든 사이트의 긴 이름을 갖지만 특정 상태 (방금 선택한 상태)에있는 사이트뿐만 아니라 테이블의 모든 사이트에 대해 긴 이름이 지정됩니다.

결국 드롭 다운 1에는 사용 가능한 모든 상태가 채워 져야합니다. 사용자가 자신의 상태를 선택하면 선택한 국가 내의 모든 커뮤니티와 함께 ​​드롭 다운 2의 인구가 트리거됩니다. 지역 사회의 선택이 드롭 2를 클릭하면, 그것은 어떤 조언을 많이 예를 들어, http://www.webpage.com/reports.php?page=communityNameGoesHere ...

감사를 위해 당신이 여기있을 수 있습니다하기 위해 사용자의 브라우저를 리디렉션합니다 :)

Answer 1

를 당신은 몇 가지있다 너는 갈 수있는 노선의. AJAX를 사용하여 주 선택시 사이트 목록의 값을 가져올 수 있습니다. 또는 자바 스크립트를 사용하여 상태 선택에 따라 두 번째 목록의 값을 필터링 할 수 있습니다.

제 2의 것이 당신에게 더 좋은 선택 일 것이라고 생각할 수 있습니다. 그래서 초점을 맞추 겠지만, AJAX 솔루션을 원한다면 논의 할 수 있습니다.

단일 DB 호출을 만들기 위해 스크립트를 수정합니다. 한 테이블에서 정보를 쿼리하므로 DB를 두 번 호출 할 이유가 없습니다.이제

foreach($array as $state => $not_used) { 
    echo sprintf('<option value="%1$s">%1$s</option><br />', $state); 
} 

:

단순히 그런 다음 다음과 옵션을 첫 번째 선택을 구축하고 채우는이

$array = array(); 
while ($row = mysql_fetch_assoc($query)) { 
    $array[$row['state']][] = $row; 
} 

뭔가를 루프 결과 세트를 통해 작업을 수행 할 수 있습니다

SELECT * FROM sites ORDER BY states ASC를 사용 두 번째 선택 빌드하고 옵션을 채우십시오 :

foreach($array as $state => $state_array) { 
    foreach($state_array as $site) { 
     echo sprintf('<option class="%1$s" value="%2$s">%3$s</option><br />', $state, $site['shortname'], $site['longname']); 
    } 
} 

참고 : 여기에 HTML class 속성이 추가되었습니다. 이렇게하면 표시하려는 항목 만 표시하는 편리한 핸들이 만들어집니다.

사이트 선택 요소에 sites의 ID를 부여하고 선택한 요소의 ID를 states으로 지정합니다. CSS에 다음 규칙을 설정하십시오.

#sites { display: none; } 
#sites option { display: none; } 

이렇게하면 처음에는 사이트 메뉴와 그 안에있는 모든 옵션이 숨겨집니다.

적절한 요소를 숨기거나 표시하고 사이트 선택시 리디렉션을하기위한 간단한 jQuery를 보여 드리겠습니다. 내가 jQuery를 언급하면 ​​스냅을하려고하는 것이됩니다.

$(document).ready(function() { // calls this function on document ready 
    $('#states').change(function() { // binds onchange function to #states select 
     var selected_state = $(this).val(); // gets current selected value of #states select 
     $('#sites option').hide(); // hides all options in sites select 
     $('.'+selected_state).show(); // show site options with class = selected_state 
     $('#sites').show(); // show entire #sites select (only useful for display from initial hidden state) 
    }); 
    $('#sites').change(function() { // binds onchange function to #sites select 
     window.location = 'reports.php?page=' + $(this).val(); // perform redirect 
    }); 
});