나는 두 드롭 다운 목록동적
I 다운 목록 제 드롭 선택 결과에 따라 상기 제를 채워야포함 작은 PHP 페이지가 ....이다 가능한? 즉, 첫 번째 드롭 다운 목록에서 선택한 값을 사용하고 두 번째 드롭 다운 목록을 채우는 데 사용 된 dB 쿼리에서 사용해야합니다 (그러나 첫 번째 드롭 다운 목록 선택시이 값을 채워야합니다).
이것이 가능하다면 어떤 힌트?
덕분에 (당신은 내가 먼저 dB에서 목록 드롭 다운을 채울 수 있어요 있다고 가정 할 수 있습니다)하십시오
첫 번째 드롭 다운의 선택을 보낼 AJAX를 사용해야합니다 그런 다음 데이터베이스를 쿼리하고 두 번째 드롭 다운을 생성하여 사용자에게 다시 보냅니다.
옵션 1 : 두 번째 선택을위한 데이터를 숨겨진 요소 또는 JS 개체로 문서에 포함합니다. change 첫 번째 선택에서 이벤트 처리기가 두 번째 선택 항목을 채 웁니다. 목록 외에도 example dynamic select page이 있습니다.
옵션 2 : AJAX를 사용하십시오. 첫 번째 선택이 변경되면 서버에 두 번째 선택의 내용을 요청한 다음 채 웁니다. JS 라이브러리 (예 : jQuery)를 사용하면이 작업이 매우 쉽습니다.
$('select#one').change(
function (evt) {
$('select#two').load('/thing/'+this.value);
}
);
"/ 건/< 발 >는"실제 스크립트에 URL 경로를 해결하기 위해 "< 발 >"(웹 서버의 재 작성 기능을 사용을 기준으로 항목의 목록을 생성하는 서버 측 스크립트를 식별). 당신은 단순히 < 옵션을 > 요소로 생성 할 수 있지만 더 좋은 디자인은 결과 형식을 지정하는 방법을 포함하기 때문에 JSON 또는 다른 형식을 사용하여 <li>으로 목록을 출력 할 수 있습니다.
$('select#one').change(
function (evt) {
$('select#two').load('/thing/'+this.value, {fmt: 'option'});
}
);
페이지를 다시로드하지 않고도 서버에 대한 비동기 호출이 필요합니다. (나는 당신이 실제로 서버에 다시 게시하는 버튼을 가지고 있다고 의심한다.) 그래서 AJAX는 정확히 그것을 할 수있는 것이다. 첫 번째 드롭 다운의 onchange 이벤트 처리기에 AJAX 호출을 추가하여 서버에 선택 항목을 다시 게시하고 두 번째 드롭 다운의 내용을 반환합니다. AJAX 호출이 새 값을 반환하면이 값을 사용하여 두 번째 드롭 다운에 대한 내용을 빌드합니다. 이것의 대부분은 PHP로 남아있는 실제 서버 부분 외에도 Javascript로 수행됩니다.
두 가지 방법이 있습니다. 올드 스쿨은 페이지를 새로 고치지 않고 두 번째 드롭 다운의 내용을로드하기 위해 "범용으로 작동하는 페이지를 다시 작성하고 옵션을 선택하여 제출"옵션과 새로 생성 된 AJAX 메서드를 사용합니다.
두 가지 모두 장단점이 있으므로 사용자의 목적에 가장 잘 어울립니다. oldschool 메서드는 자바 스크립트가 전혀 필요하지 않지만 서버를 통해 양식을 왕복 이동하므로 "창을 지우고 페이지를 다시 그립니다"라는 깜박임을 얻게됩니다.
AJAX 방법은 새로 고침 깜박임을 무시하지만 Javascript가 비활성화 된 브라우저에서도 작동하지 않습니다. AJAX 호출과 드롭 다운의 채우기를 처리하기 위해 클라이언트 측 코드가 조금 더 필요하지만 서버 측 코드는 동일한 쿼리, 동일한 검색 루프, 다른 출력 등 두 방법 모두 거의 동일합니다. 행동 양식.
@outis는 .change을 jquery에 사용하고 onchange 이벤트를 select 코드에 사용하십시오.
<select id='my_select' onchange='javascript:myfunc()'>
<option value='a'>a</option>
.
.
<option value='z'>z</option>
function myfunc(){
//write code to populate another dropdown based on selected value
}
을 볼 수 있습니다. 다운로드하기에 너무 큰 경우 AJAX를 사용해야합니다. 고객이 AJAX를 사용할 수 없거나 서버 연결을 제한하거나 집중적 인 쿼리가 필요한 경우 JS 개체/배열을 사용하십시오. – webbiedave