질문

이것을 설명하는 더 좋은 방법을 생각할 수 없었기 때문에 제목에 대해 사과드립니다. 한 페이지에 여러 선택 dropdown이 있습니다. 하나의 선택은 두 번째에 영향을 미칠 수 있고, 두 번째의 선택은 세 번째에 영향을 미칠 수 있습니다. 등등 ... 마지막 동작은 세 가지 모두의 선택된 값을 사용하여 '끝'에서 수행됩니다. 나는 작동하는 것처럼 보이는 다음을 생각해 냈지만 이것을 처리하는 더 좋은 메소드가 있다고 믿어야합니다.

의사 코드이지만 아이디어를 얻어야합니다. 나는 이것을 'complete ()'에서 각 선택의 값을 기반으로 데이터 테이블을 표시하거나 차트를 표시하는 것과 같은 다양한 방법으로 사용할 것입니다.

html

<select id="one" name="one">
    some options here
</select>

<select id="two" name="two">
    some options here
</select>

<select id="three" name="three">
    some options here
</select>

jquery

$('#one').on("change", function (e) {
    two();
});

$('#two').on("change", function (e) {
    three();
});

$('#three').on("change", function (e) {
    complete();
});

function one() {
    ...maybe change options of two or something else
    $('#two').trigger('change');
}

function two() {
    ...maybe change options of three or something else
    $('#two').trigger('change');
}

function three() {
    ...do something
    $('#three').trigger('change');
}

function complete() {
    ...use values from all three to do something
}

명확성을 위해 추가 정보 추가 :

어떤 선택이 변경 되더라도 나는 완전한 행동이 일어날 때까지 그것과 그 후에 모든 것을 '확인'해야합니다. 예를 들어 1을 변경 한 경우 확인한 다음 2, 3을 차례로 변경 한 다음 완료를 실행합니다. 2가 변경되면 확인한 다음 3을 실행하고 완료합니다. 3이 변경되면 확인한 다음 완료를 실행합니다.

예 : 1은 사용자가 옵션 값 '개'로 변경했습니다. 개가 선택 되었기 때문에 2 개의 옵션을 개 유형으로 변경하는 것을 알고 있으며, 개 유형은 2 개에 표시되므로 3 개의 옵션을 색상으로 변경합니다. .. 그런 다음 완료 실행합니다. 이 경우 완전하면 개, 모든 유형, 모든 색상이 값으로 제공됩니다.

이제 그들이 사용할 수있는 옵션이므로 2를 'pit bull'의 값으로 변경한다고 가정 해 보겠습니다. 그래서 그 값을 확인하고 3을 변경하여 모두, 흰색 및 검정색 옵션 만 표시 한 다음 완료를 실행합니다. Complete는 값으로 개, 핏불 및 모든 색상을 제공합니다.

내가 얻는 것은 선택이 변경 될 때 변경 사항을 기반으로 선택 항목을 변경할 수 있다는 것입니다-마치 모두 함께 연결되어있는 것처럼-각 항목에 대해 완료해야합니다.

선택 항목에 따라 표 및 / 또는 차트를 표시하는 데 사용합니다. 따라서 변경 될 때마다 그 이후의 모든 선택 사항을 확인하고 값을 가져오고 테이블 / 차트를 업데이트합니다.

답변1

많은 메소드가 있습니다.


<script>
  function complete() {
    jQuery( "select" ).each(function( index ) {
      var _this = jQuery(this);
      console.log("SELECT_BOX " + _this.attr('name') + ':' +_this.val());
    });
  }

  jQuery('select').on('change', function(){
    var _this = $(this);
    if(_this.next('select').length){
      //Here We are adding active class to the next select box, you can change as per requirement
      _this.next('select').addClass('active');
    }
    else{
      //When you reach to the last select box
      complete();
    }
  })
</script>