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

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

· 7년 전 · 5111 · 3

<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개

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

게시글 목록

번호 제목
15969
jQuery .jquery
15968
15967
jQuery .is()
15966
15965
15964
15963
15962
jQuery .index()
15961
15960
15959
jQuery .html()
15958
15957
jQuery .hide ()
15956
15955
15954
15953
15952
15949
15947
15946
15945
15944
15942
15941
15940
15939
15938
15937
15936