jQuery와 AJAX를 사용하여 동적 계단식 드롭다운 상자를 만드는 방법은 무엇입니까?

동적 계단형 드롭다운 상자

이 예는 다음을 기반으로 두 번째 드롭다운 상자를 채우는 동적 드롭다운 상자를 만드는 방법을 보여줍니다. 첫 번째 드롭다운 상자 선택 필수입니다.

설명:

1. 첫 번째 드롭다운 상자:

   • 포함 사용자가 선택할 수 있는 옵션입니다.
   • 사용자가 선택할 때 항목이 있으면 변경 이벤트가 트리거됩니다.

2. jQuery/AJAX:

   • 변경 이벤트가 AJAX 요청을 트리거합니다. 별도의 PHP 파일(예: update.php)로 저장합니다.
   • 선택한 값 첫 번째 드롭다운 상자에서 요청과 함께 전송됩니다.

3. update.php:

   • 첫 번째 드롭다운 상자에서 선택한 값.
   • 두 번째에 대한 관련 옵션을 검색하는 쿼리를 실행합니다. 드롭다운 상자.
   • JSON 형식으로 데이터 형식을 지정하고 AJAX 호출로 반환합니다.

4. AJAX 성공 함수:

   • JSON 응답을 수신하고 두 번째 드롭다운 상자를 관련 옵션.

예 코드:

tester.php:

<select name="gender">

upda te.php:

if (!empty($_GET['id']) && !empty($_GET['value'])) {
    $id = $_GET['id'];
    $value = $_GET['value'];

    $sql = "SELECT * FROM `category` WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {
        $out = array('<option value="">Select one</option>');

        foreach ($list as $row) {
            $out[] = '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));
    } else {
        echo json_encode(array('error' => true));
    }
} else {
    echo json_encode(array('error' => true));
}

메커니즘:

1. 언제 사용자가 첫 번째 드롭다운 상자에서 옵션을 선택하면 해당 값이 캡처됩니다.
2. update.php에 AJAX 요청이 이루어지며 선택한 값이 전달됩니다.
3. update.php는 두 번째 드롭다운 상자에 적합한 옵션을 선택하고 이를 JSON 형식으로 반환합니다.
4. AJAX 성공 함수는 두 번째 드롭다운 상자에서 선택한 옵션을 업데이트하여 동적입니다.

이 단계에 따라 데이터 선택을 위한 사용자 친화적이고 반응성이 뛰어난 인터페이스를 제공하는 계단식 드롭다운 상자를 만들 수 있습니다.

위 내용은 jQuery와 AJAX를 사용하여 동적 계단식 드롭다운 상자를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!