프론트 - select box 직접입력란 생기게하기

HTML

<select id="selbox" name="selbox">
    <option value="">선택</option>
    <option value="1">하나</option>
    <option value="2">둘</option>
    <option value="3">셋</option>
    <option value="direct">직접입력</option>
</select>


//상단의 select box에서 '직접입력'을 선택하면 나타날 인풋박스
<input type="text" id="selboxDirect" name="selboxDirect"/>

 

 

 

JS(jQuery)

$(function(){
    //직접입력 인풋박스 기존에는 숨어있다가
    $("#selboxDirect").hide();

    $("#selbox").change(function() {
        //직접입력을 누를 때 나타남
        if($("#selbox").val() == "direct") {
        $("#selboxDirect").show();
        }  else {
        $("#selboxDirect").hide();
        }
    }) 
});

 

 

 

이렇게 하고, DB에 selbox의 value 값을 넣어줄 때는, java단에서 selbox와 selboxDirect의 값을 체크하여 올바른 값을 넣고 DB 처리 해주면됨.