이전 확인란 선택에 따라 자동 선택 상자 선택

Question

첫 번째 질문의 답 (확인란)이 두 번째 질문 (선택 상자)의 선택이되는 두 가지 질문으로 양식을 만들려고합니다. 다음은 두 가지 질문입니다.

질문 1 : 어느 대학에서 야구를 했습니까? (체크 박스)
질문 2 : 야구장/경기장 중 가장 좋아하는 학교는? (선택 상자)

첫 번째 질문의 대답은 선택 필드를 자동으로 채워야합니다.

첫 번째 단계는 질문 1의 답변을 기반으로 배열을 만드는 것입니다. 여기까지 제가 지금까지했습니다. 이 스크립트는 페이지에 대한 응답을 실시간으로 작성합니다. 내 생각은 내가 그 해답을 포착했는지 확인하는 것이었다. 내가 겪고있는 문제는 첫 번째 질문의 답을 바탕으로 두 번째 질문을 만드는 방법입니다.

<form> 
    <input type="checkbox" name="check" value="University of Alabama" id="University of Alabama"> 
    <label for="ch1">University of Alabama</label><br> 
    <input type="checkbox" name="check" value="Florida" id="University of Florida"> 
    <label for="ch2">University of Florida</label><br> 
    <input type="checkbox" name="check" value="Georgia" id="University of Georgia"> 
    <label for="ch3">University of Georgia</label><br> 
    <input type="checkbox" name="check" value="University of North Carolina" id="University of North Carolina"> 
    <label for="ch4">University of North Carolina</label><br> 
    <input type="checkbox" name="check" value="University of South Carolina" id="University of South Carolina"> 
    <label for="ch4">University of South Carolina</label> 
</form> 

<p><b>Results:</b> <span id="results"></span></p> 

<script> 
    function showValues() { 
    var fields = $(":input").serializeArray(); 
    $("#results").empty(); 
    jQuery.each(fields, function(i, field) { 
     $("#results").append(field.value + " "); 
    }); 
    } 

    $(":checkbox, :radio").click(showValues); 
    $("select").change(showValues); 
    showValues(); 
</script> 

Answer 1

빠른 노트 - 나는과 같이, 당신의 체크 박스의 입력에 대한 array 이름을 사용하는 것이 좋습니다 :

<input name="check[]" value="..." /> 

말했다되는 것이 바로 여기에 당신을 찰 수있는 신속하고 더러운 솔루션입니다 방향. 원하는 핸들러로 showValues()으로 전화하면됩니다.

// Here's what your usage might look like: 
$("#my_button").on('click', showValues); 
// or for updates in 'real-time'... 
$("input[name='check[]']").on('click', showValues); 

function showValues() { 
    var schools = []; 
    var checked = $("input[name='check[]']:checked"); 
    $.each(checked, function (_, el) { 
     schools.push(el.value); 
    }); 

    if (schools.length > 0) { 
     var fav_select = $('<div id="favorite_school_box"><label for="favorite_school">Which stadium was your favorite?</label></div>'); 
     var fav_list = $('<select name="favorite_school"></select'); 
     $.each(schools, function (_, school) { 
      fav_list.append('<option value="' + school + '">' + school + '</option>'); 
     }); 
     fav_select.append(fav_list); 
     if ($("#favorite_school_box").length <= 0) { 
      $("body").append(fav_select); 
     } else { 
      $("#favorite_school_box").replaceWith(fav_select); 
     } 
    } 
    else { 
     alert('Please make a selection.'); 
    } 
} 

주 - 명심이 기능을 사용하면 50 개 또는 100 또는 1000 질문은 이전 질문과 답변에 따라 한 상황 주어진 매우 추상화하지 않으며, 이것은 충분한 해결책이 될 수 없다. 이 글자 그대로를 어떻게 구현하는지 보여주고 싶었고 앞으로 추가 기능/더 나은 기능을위한 출발점을 제시하고자했습니다.