셀렉트박스에 선택값별 색상 다르게 하려면?
본문
어쩌면 기초적인 질문인지는 모르겠습니다.
아래와 같이 셀렉트박스를 작성하였는데요.
여기서 각 선택값별로 색상을 다르게 주는 방법이 있을까요?
<select name="wr_9" id="wr_9" required>
<option value="">선택하세요.</option>
<option value="접수확인"<?php echo ($write['wr_9'] == "접수확인") ? " selected" : "";?>>접수확인</option>
<option value="상담중"<?php echo ($write['wr_9'] == "상담중") ? " selected" : "";?>>상담중</option>
<option value="상담완료"<?php echo ($write['wr_9'] == "상담완료") ? " selected" : "";?>>상담완료</option>
</select>
답변 3
저도 님과 같은 것을 고민했었는데요.
선택값 별로는 안돼네요.
그래서... 꿩대신 닭 잡았어요.
그냥 셀렉트 태그에 배경색을 상태별로 다르게 주었습니다. ^^; 참고하세요
<select name="wr_9" id="wr_9" required <?=( $write['wr_9'] == "접수확인" ? " style='background:red;'" : ( $write['wr_9'] == "상담중" ? "background:blue;" : ( $write['wr_9'] == "상담완료" ? "background:green;" : "" ) ) )?>>
<option value="">선택하세요.</option>
<option value="접수확인"<?php echo ($write['wr_9'] == "접수확인") ? " selected" : "";?>>접수확인</option>
<option value="상담중"<?php echo ($write['wr_9'] == "상담중") ? " selected" : "";?>>상담중</option>
<option value="상담완료"<?php echo ($write['wr_9'] == "상담완료") ? " selected" : "";?>>상담완료</option>
</select>
아~ 이런 방법이 있었네요. 감사합니다.^^
<style>
body {padding:20px;}
.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>
http://note.tloghost.kr/ex/ex_select.php
답변을 작성하시기 전에 로그인 해주세요.