[jquery] 2단 셀렉트 박스 (3단도 쌉가능)

첫번째 셀렉트 박스의 옵션 값에 따른 두번째 셀렉박스의 선택 옵션 정하기 !

<form>
    <select id="s1" onchange="select1Change();">
        <option>옵션1</option>
        <option value="op1">op1</option>
        <option value="op2">op2</option>
        <option value="op3">op3</option>
    </select>
    <select id="s2" onchange="select2Change()">
        <option>옵션2</option>
    </select>
    <p class="result"></p>
</form>

 

그리고 초간단한 jquery

var a = ["op1-1", "op1-2"];
var b = ["op2-1", "op2-2"];
var c = ["op3-1", "op3-2"];

function select1Change() {
    var o;
    var v = $("#s1").val();

    v == "op1"
        ? (o = a) : v == "op2"
        ? (o = b) : v == "op3"
        ? (o = c) : (o = []); //else
    
    /* #s1 옵션값 변경시 #s2 옵션값 리셋*/
    $("#s2").empty();
    $("#s2").append("<option>옵션2</option>");

    for (let i = 0; i < o.length; i++) {
        $("#s2").append('<option value="' + o[i] + '">' + o[i] + "</option>");
    }
}
$("#s2").on("change", function () {
    $(".result").text($("#s1").val() + ", " + $("#s2").val());
});

이렇게 보면 초간단인데 (줄이고 줄인거 ...!)

3단이나 4단으로 가면서 경우의 수가 많아진다

여기서 과연 얼마나 더 간단하게 줄일 수 있을까 ...!