6월24일28일차 -[html]select, option tag [jquery] change함수

고향방문으로 휴가를 썼기 때문에 학원 수업을 듣지 못했습니다.

오늘의 github 코드를 참고하여 스스로 학습합니다.

---

select 와 option 태그를 이용하면

간단하게 선택형 메뉴 리스트를 만들 수 있습니다.

아무런 css를 적용하지 않은 형태로도 문제없이 이용할 수 있을만한 모양새를 갖추고 있습니다.

padding과 색상을 조금씩 손봐주면 곧바로 쓸만해집니다.

#footer .bottom select {

    font-size: 12px;

    text-transform: uppercase;

    background: transparent;

    color: #ddd;

    padding: 5px 15px;

    border: 1px solid #666;

}

#footer .bottom option {

    color: #fff;

    background: #333;

}

별도로 설정을 해주지 않아도 리스트의 사이즈가 웹 사이즈를 벗어나면 아래로 내리향하지 않고 위로 향하는 모습을 볼 수 있습니다. 편리합니다.

 

 

 

 

jquery의 change 함수를 이용하여 value의 변화 를 감지하고, callback 함수를 실행합니다.

callback 함수에는 js의 window.open()함수로 새창을 여는 함수를 만듭니다.

    $('#fl').on('change', function () {

        console.log($(this), $(this).val())

        var lnk = $(this).val();

        if (lnk) {

            window.open(lnk);

        }

    });

select('#fl')의 change를 감지하면 callback 함수에 설정한 window.open() 를 실행하도록 합니다. 새 창 열기 입니다.

this.value 값은 option tag에 입력한 value 값이 되어 해당하는 링크의 새 창이 열리게 됩니다.

  <option value="http://naver.com">instagram</option>

  <option value="http://daum.net">kakaotalk</option>

  <option value="http://google.com">facebook</option>