자바 스크립트와 아약스를 사용할 때 forloop (laravel)에서 많은 동적 드롭 다운을 사용하는 방법은 무엇입니까?

소울 코더

foreach 루프 내에서 사용하고 싶기 때문에 여러 동적 드롭 다운을 사용하려고합니다. 프로세스에서 아래에서 스크린 샷을 찍은 각 직책에 대한 단계와 상태가 있습니다. 직함을 반복하고 동적 드롭 다운을 배치했습니다. foreach 루프 내부의 단계 및 상태. 여기에 이미지 설명 입력문제는 내가 스테이지를 선택하면 내가 선택한 스테이지에 따라 모든 상태가 계속 변한다는 것입니다. 예를 들어 위 사진 에서처럼 내가 "에서 스테이지를 선택하면 내가 스테이지를 선택한 상태에만 영향을 미치고 싶습니다." Chinese traslator (listening, speaking) "직책은 자신의 단계에있는 지위에만 영향을 주어야하며"캐셔 "직책에있는 지위에 영향을주지 않아야합니다.

지금까지 한 코드에 대한 코드는 다음과 같습니다.

<?php

   $jobmatches = \App\Models\Jobposition::where('require_position',$jobseekers->desire_position_1)->orderBy('free_or_paid','desc')->pluck('id');
?>

         @foreach($jobmatches as $value)
           <?php  $job_list = \App\Models\Jobposition::where('id',$value)->first(); ?>
            <div class="form-group"> 
                <input type="checkbox" name="job_position[]" value="{{ $job_list['id']}}"> 
                {{ $job_list['job_title']}}<br>
            </div>

            <div class="form-group">
                <label for="title">Select Stage:</label>
                <select name="stage[]" class="form-control" >
                    <option value="">--- Select Stage ---</option>
                    @foreach ($stages as $key => $value)
                     <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label for="title">Select Status:</label>
                <select name="status[]" class="form-control">
                </select>
            </div>
            @endforeach

여기에 아약스 코드가 있습니다.

       $(document).ready(function() {
        $('select[name="stage[]"]').on('change', function() {
            var stateID = $(this).val();
            if(stateID) {
                $.ajax({
                    url: '/myform/ajax/'+stateID,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {

                        $('select[name="status[]"]').empty();
                        $.each(data, function(key, value) {
                            $('select[name="status[]"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });

                    }
                });
            }else{
                $('select[name="status[]"]').empty();
            }
        });
    });

어떤 도움이라도 대단히 감사하겠습니다.

prodigitalson

interelated 요소 그룹에 래핑 div를 추가합니다.

<div class="job-list">
    <div class="form-group"> 
        <input type="checkbox" name="job_position[]" value="{{ $job_list['id']}}"> 
        {{ $job_list['job_title']}}<br>
    </div>

    <div class="form-group">
        <label for="title">Select Stage:</label>
        <select name="stage[]" class="form-control" >
            <option value="">--- Select Stage ---</option>
            @foreach ($stages as $key => $value)
             <option value="{{ $key }}">{{ $value }}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label for="title">Select Status:</label>
        <select name="status[]" class="form-control">
        </select>
    </div>
</div>

그런 다음 JS에서 동일한 그룹의 요소로만 작업하도록 핸들러를 조정할 수 있습니다.

$(document).ready(function() {
    $('select[name="stage[]"]').on('change', function() {
        var stateID = $(this).val();
        /* define the target select, use closest to go back up to the job-list parent, 
         * then pull the select element that is a child of it
         */
        var $select = $(this).closest('.job-list').find('select[name="status[]"]');

        if(stateID) {
            $.ajax({
                url: '/myform/ajax/'+stateID,
                type: "GET",
                dataType: "json",
                success:function(data) {
                    $select.empty();
                    $.each(data, function(key, value) {
                        $select.append('<option value="'+ key +'">'+ value +'</option>');
                    });
                }
            });
        }else{
            $select.empty();
        }
    });
});

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

TOP 리스트

  1. 1

    Ionic 2 로더가 적시에 표시되지 않음

  2. 2

    JSoup javax.net.ssl.SSLHandshakeException : <url>과 일치하는 주체 대체 DNS 이름이 없습니다.

  3. 3

    std :: regex의 일관성없는 동작

  4. 4

    Xcode10 유효성 검사 : 이미지에 투명성이 없지만 여전히 수락되지 않습니까?

  5. 5

    java.lang.UnsatisfiedLinkError : 지정된 모듈을 찾을 수 없습니다

  6. 6

    rclone으로 원격 디렉토리의 모든 파일을 삭제하는 방법은 무엇입니까?

  7. 7

    상황에 맞는 메뉴 색상

  8. 8

    SMTPException : 전송 연결에서 데이터를 읽을 수 없음 : net_io_connectionclosed

  9. 9

    정점 셰이더에서 카메라에서 개체까지의 XY 거리

  10. 10

    Windows cmd를 통해 Anaconda 환경에서 Python 스크립트 실행

  11. 11

    다음 컨트롤이 추가되었지만 사용할 수 없습니다.

  12. 12

    C #에서 'System.DBNull'형식의 개체를 'System.String'형식으로 캐스팅 할 수 없습니다.

  13. 13

    JNDI를 사용하여 Spring Boot에서 다중 데이터 소스 구성

  14. 14

    Cassandra에서 버전이 지정된 계층의 효율적인 모델링

  15. 15

    복사 / 붙여 넣기 비활성화

  16. 16

    Android Kotlin은 다른 활동에서 함수를 호출합니다.

  17. 17

    Google Play Console에서 '예기치 않은 오류가 발생했습니다. 나중에 다시 시도해주세요. (7100000)'오류를 수정하는 방법은 무엇입니까?

  18. 18

    SQL Server-현명한 데이터 문제 받기

  19. 19

    Seaborn에서 축 제목 숨기기

  20. 20

    ArrayBufferLike의 typescript 정의의 깊은 의미

  21. 21

    Kubernetes Horizontal Pod Autoscaler (HPA) 테스트

뜨겁다태그

보관