jQuery를 사용하여 단일 JSON 배열에서 동적 계단식 선택을 시도합니다

Question

이것이 완료되었으며 올바른 용어를 검색하지 못하는 것 같습니다. 이미 응답 한 내용을 묻는 메시지를 표시하지 마십시오. .

나는 (동적) 항목 속성의 배열을 가지고 있으며 최종 항목을 선택 상자로 드릴 다운하려고합니다.

var JSONarray = [ 
{'itemAtID':1, 
    'attribute1':'sm', 
    'attribute2':'blue', 
    'attribute3':'short sleeved' 
}, 
{'itemAtID':2, 
    'attribute1':'med', 
    'attribute2':'blue', 
    'attribute3':'short sleeved' 
}, 
{'itemAtID':3, 
    'attribute1':'lg', 
    'attribute2':'white', 
    'attribute3':'short sleeved' 
}, 
{'itemAtID':4, 
    'attribute1':'med', 
    'attribute2':'white', 
    'attribute3':'short sleeved' 
}, 
{'itemAtID':5, 
    'attribute1':'lg', 
    'attribute2':'blue', 
    'attribute3':'long sleeved' 
}]; 

업데이트] ARRAYS

var JSONarray = [ 
{'itemAtID':1, 
    'attribute1':'sm', 
    'attribute2':'blue', 
    'attribute3':'short sleeved', 
    'QoH': 3, 
    'image': '101001506-1.jpg' 
}, 
{'itemAtID':2, 
    'attribute1':'med', 
    'attribute2':'blue', 
    'attribute3':'short sleeved', 
    'QoH': 3, 
    'image': '101001506-2.jpg' 
}, 
{'itemAtID':3, 
    'attribute1':'lg', 
    'attribute2':'white', 
    'attribute3':'short sleeved', 
    'QoH': 3, 
    'image': '101001506-3.jpg' 
}, 
{'itemAtID':4, 
    'attribute1':'med', 
    'attribute2':'white', 
    'attribute3':'short sleeved', 
    'QoH': 3, 
    'image': '101001506-4.jpg' 
}, 
{'itemAtID':5, 
    'attribute1':'lg', 
    'attribute2':'blue', 
    'attribute3':'long sleeved', 
    'QoH': 3, 
    'image': '101001506-5.jpg' 
}]; 


var formFields = [ 
    {'name':'itemAt1', 
    'label': 'Size', 
    'fieldOpts': ['sm','med','lg','xl'] 
    }, 
    {'name':'itemAt2', 
    'label': 'Color', 
    'fieldOpts': ['blue','white','black'] 
    }, 
    {'name':'itemAt3', 
    'label': 'Style', 
    'fieldOpts': ['short sleeve','long sleeve'] 
    } 
]; 

나는이 세 가지 동적으로 생성 된 선택 상자 : ALL SELECT 상자에 초기 옵션을 반영하기 위해 업데이트

<form> 
    <label>Size</label> 
    <select name="attribute1" id="id_attribute1"> 
    <option value="">Select Size</option> 
    <option value="sm">sm</option> 
    <option value="md">md</option> 
    <option value="lg">lg</option> 
    </select> 

    <label>Color</label> 
    <select name="attribute2" id="id_attribute2"> 
    <option value="">Select Color</option> 
    <option value="blue">blue</option> 
    <option value="white">white</option> 
    </select> 

    <label>Style</label> 
    <select name="attribute3" id="id_attribute3"> 
    <option value="">Select Style</option> 
    <option value="short sleeve">short sleeve</option> 
    <option value="long sleeve">long sleeve</option> 
    </select> 
</form> 

사용자가 크기를 선택하면 배열을 쿼리하고 사용 가능한 색상을 반환합니다. 사용자가 스타일을 선택하면 itemAtID를 반환하려고합니다.

이것은 내가 이루고자하는 것을 아주 간략하게 표현한 것이지만이 일을 할 수 있다면 내 목적에 맞게 확장 할 수 있습니다. 나는 거기에 대한 플러그인이 있어야하지만, 데이터가 객체의 원래 배열로 전달 되었기 때문에 서버에 불필요한로드를 가하는 AJAX가 필요없는 객체를 찾을 수는 없었다.

업데이트 나는 원래 계획을 좀 더 유용하게 만들기 위해 약간 수정해야한다는 것을 알고 있습니다. 사용자는 선택 상자 중 하나를 먼저 선택할 수 있어야하고 나머지 선택되지 않은 상자의 옵션은 해당 존재 또는 QoH (수량)를 기반으로 활성화 또는 비활성화로 업데이트해야합니다. 검정색과 같은 JSONarray에없는 옵션은 나타나지 않아야하지만 선택한 크기/색상/스타일 또는 0 QoH가 아닌 옵션은 비활성화해야합니다.

모든 상자에 대한 선택이 완료되면 해당 옵션과 일치하는 itemAtID에 대해 JSONarray를 쿼리해야하며 숨겨진 필드 (itemAtID)를 업데이트하고 제출 단추를 사용하도록 설정해야합니다.

그래서 내 계획은 onChange 기반 클래스를 사용하여 함수를 트리거하는 것입니다.

빈 배열 (formSelects)을 만듭니다.

formFields 배열을 반복하고 1) 현재 필드 선택에 따라 옵션을 활성화 또는 비활성화하고 2) 선택 항목이 존재하면 formSelects 배열로 푸시합니다.

formSelects.length가 formFields.length와 동일한 경우 JSONarray에서 조건과 일치하는 행을 검색하고 숨겨진 itemAtID 필드를 업데이트하고 제출 버튼을 활성화 (결국 이미지 업데이트)합니다.

내 문제를 해결할 것으로 생각합니다. 누군가이 계획에 결함이 있으면 알려주십시오. jQuery에 익숙하지 않아서 다음 날 적절한 구문을 정렬하기 전에 내 계획이 작동하지 않는다는 것을 알게되어 좋을 것입니다.

업데이트 : 첫 번째 결함 만 알면됩니다. 양식을 다시 설정하는 방법을 알아 내야 비둘기가 귀하의 선택에 의해 구속받지 않게됩니다 ...다시 말하면, 스타일 선택을 통해 크기 나 색상을 사용하지 못하게하는 경우, 그걸 처리하는 방법이 확실하지 않을 수 있습니다.

내 근무 계획에 대한 도움과 인내심에 감사드립니다.

Answer 1

,

//Populate Colors based on Size Selected  
$('#id_attribute1').on('change',function(){ 
$("#id_attribute2").empty(); 
$("#id_attribute2").append('<option value="">please select color</option>'); 
for(var i = 0 ; i < JSONarray.length ; i++) 
    { 
     if(JSONarray[i]['attribute1'] == this.value) 
     { 
      $("#id_attribute2").append('<option value="'+JSONarray[i]['attribute2']+'">'+JSONarray[i]['attribute2']+'</option>'); 
     } 
    } 
}); 

//Populate Style based on Color Selected 
$('#id_attribute2').on('change',function(){ 
$("#id_attribute3").empty(); 
$("#id_attribute3").append('<option value="">please select style</option>'); 
for(var i = 0 ; i < JSONarray.length ; i++) 
    { 
     if(JSONarray[i]['attribute2'] == this.value) 
      { 
       $("#id_attribute3").append('<option value="'+JSONarray[i]['itemAtID']+'">'+JSONarray[i]['attribute3']+'</option>'); 
      } 
    } 
}); 

//Return ItemAtID base on Style selected 
$('#id_attribute3').on('change',function(){ 
    alert(this.value); 
}); 

위의 똑 바른 앞으로 방법입니다. 다음과 같이 내 최초의 계획을 실현

//All Change event handled by single function 
$('#id_attribute1,#id_attribute2,#id_attribute3').on('change',function(){ 
var id = this.id.substr("id_attribute".length); // id will give 1 or 2 or 3 that can be used to identify the select boxes 
//id = 3 for the #id_attribute3 
if(id == 3) 
{ 
    alert(this.value); 
} 
else 
{ 
    var newid = parseInt(id) + 1; 
    //Find the select box to populate 
    var $newattrid = $("#id_attribute"+ newid); 
    var attribute = 'attribute'+ newid; 
    $newattrid.empty(); 
    //id = 1 for the #id_attribute1 
    if(id == 1) 
    { 
     $newattrid.append('<option value="" class="select">please select color</option>'); 
    } 
    //For the #id_attribute2 
    else 
    { 
     $newattrid.append('<option value="">please select style</option>'); 
    } 

    for(var i = 0 ; i < JSONarray.length ; i++) 
    { 
     if(JSONarray[i]['attribute'+id] == this.value) 
     { 
      if(id == 1) 
      { 
        $newattrid.append('<option value="'+JSONarray[i][attribute]+'">'+JSONarray[i][attribute]+'</option>'); 
      } 
      else 
      { 
        $newattrid.append('<option value="'+JSONarray[i]['itemAtID']+'">'+JSONarray[i][attribute]+'</option>'); 
      } 
      }  
    } 
} 
}); 

Answer 2

id_attribute2 id 선택 값을 입력하십시오.

당신이 코드를 사용할 수 있습니다

$(document).on('change','#id_attribute1',function(){ 
    let tmpVal = $(this).find("option:selected").val(); 
    $("#id_attribute2").html('<option value="">please select color</option>'); 
    for(var z = 0 ; z < JSONarray.length ; z++) 
    { 
     if(JSONarray[z]['attribute1'] == tmpVal) 
      $("#id_attribute2").append('<option value="'+JSONarray[z]['attribute2']+'">'+JSONarray[z]['attribute2']+'</option>'); 
    } 
});