select를 선택하지 않았을때 border 컬러 변경

Question

input에 아무값도 입력하지 않았을때 border 컬러 변경되게 하는거는 배워서 쉽게 해결했지만

 

select를 클릭하고 선택하지 않고 창을 빠져 나갔을때 border 컬러 변경되게 하는 것이 잘 안됩니다.

 

value값이나 seledcted로 제어하려고 했으나 생각처럼 되지 않았습니다.

select_text 를 클릭했을때 ".select_text > option[value='nochoice']"에 선택이 되어있다면(혹은 0번째가 선택되어있다면) border 컬러를 빨간색으로 해라 라고 만들면 될꺼 같은데 이리저리 해봐도 다 막힙니다

 어떻게 해야 할까요??

https://jsfiddle.net/jongmin/te5a3rv5/

Answer 1

if(".select_text > option[value='nochoice']") 표현법은 잘못되었습니다. 이것을 아래와 같이 수정해 사용하는게 맞습니다.

if ($(event.currentTarget).children("option[value='nochoice']:selected").length) {

}

하지만 click 이벤트에서는 이것 조차도 문제가 발생합니다. click은 무조건 클릭시에 이벤트가 발생하기에 첫번째 항목이 선택된 상태에서 클릭을 하는 것은 결국 위의 조건문에서는 항상 true를 반환합니다. 그래서 어떤 항목을 선택했던 적색 테두리를 만들 것입니다.

select는 click 보다는 change 이벤트 타입을 적용하도록 합니다.

html은 첫번째 option은 값을 비워놓도록 하고 selected 속성을 명시적으로 정의하지 않아도 됩니다. (어차피 첫번째 항목을 기본적으로 선택해 주므로)

이벤트 발생후 값을 체크해 값이 비워져 있으며 테두리를 적색으로 처리하고 그렇지 않으면 필요에 따라 정의하면 됩니다.

그리고 기본적으로 outline이 생기므로 사용자가 인지하기가 어려으므로 마지막으로 outline 속성을 'none'으로 지정합니다.

다음 아래는 수정된 코드입니다.

$(function() {
    $(".select_text").on('change', function(event) {
        var value = $(this).children("option:selected").attr("value");

        if (!value) {
            $(this).css("border", "1px solid red");
        } else {
            $(this).css("border", "1px solid #e4e5e7");
        }

        $(this).css("outline", "none");
    });
})

 

Comments

제가 원하는건 selected가 되있는 option으로 냅뒀을때 border 색이 변하는 것이므로 if문에서 value앞에 부정(!)을 빼줘야 원하는 결과값이 나오더라구요.

outline은 미처 생각못했네요.

항상 가르침 감사합니다!!