<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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 15969 |
jQuery
.jquery
|
| 15968 |
JavaScript
공휴일을 제외한 시간적용 ON/OFF 스크립트예제 (휴일추가가능)
|
| 15967 |
jQuery
.is()
|
| 15966 |
jQuery
.insertBefore()
|
| 15965 |
jQuery
.insertAfter()
|
| 15964 |
jQuery
.innerWidth ()
|
| 15963 |
jQuery
.innerHeight ()
|
| 15962 |
jQuery
.index()
|
| 15961 |
jQuery
jQuery( ":image" )
|
| 15960 |
jQuery
jQuery ( "# id")
|
| 15959 |
jQuery
.html()
|
| 15958 | |
| 15957 |
jQuery
.hide ()
|
| 15956 |
jQuery
jQuery ( ": hidden")
|
| 15955 |
기타
그누보드5 기본쿼리
|
| 15954 |
jQuery
.height()
|
| 15953 |
jQuery
jQuery ( ": header")
|
| 15952 |
jQuery
.hasClass( className )
|
| 15949 |
PHP
네이버 클로버 tts
3
|
| 15947 |
node.js
네이트온 팀룸으로 메일 수신 확인
1
|
| 15946 |
jQuery
jQuery ( ": has (selector)")
|
| 15945 |
jQuery
attributeHas 선택자
|
| 15944 |
jQuery
.has (selector)
|
| 15942 |
jQuery
.get (index)
|
| 15941 |
jQuery
.focusin (handler)
|
| 15940 |
jQuery
.focusin (handler)
|
| 15939 |
jQuery
jQuery ( ": focus")
|
| 15938 |
jQuery
.focus (handler)
|
| 15937 |
jQuery
jQuery( ":first" )
|
| 15936 |
jQuery
jQuery ( ": first-of-type")
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기