테스트 사이트 - 개발 중인 베타 버전입니다

select 선택에 따라 테두리 색상 변경

<style>
.ex-select {padding:0.5em; border-radius:0.5em; border:1px solid;}
</style>

<select class="ex-select">
    <option value="red" data-color="red">red</option>
    <option value="green" data-color="green">green</option>
    <option value="blue" data-color="blue">blue</option>
    <option value="tomato" data-color="tomato">tomato</option>
    <option value="lightblue" data-color="lightblue">lightblue</option>
</select>

<script>
$(function() {
    $('.ex-select').change(function(e) {
        var $this = $(this);
        var c = $this.find('option:selected').data('color');
        $this.css({'color':c, 'border-color': c});
    });
    $('.ex-select').each(function() {
        var $this = $(this);
        $this.trigger('change');
        $this.find('option').each(function() {        
            $(this).css('color',$(this).data('color'));
        });
    });
});
</script>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 3개

감사합니다.
좋은 자료 감사합니다~
좋은 자료 감사합니당

게시글 목록

번호 제목
15935
15934
jQuery .first()
15933
15932
15931
15930
15929
15928
15924
15923
15922
15921
15920
15919
15917
15916
15915
15914
15913
15912
15911
15910
15909
15908
15907
15906
15901
15900
15899
15898