어쩌면 기초적인 질문인지는 모르겠습니다.
아래와 같이 셀렉트박스를 작성하였는데요.
여기서 각 선택값별로 색상을 다르게 주는 방법이 있을까요?
<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개 / 댓글 1개
채택된 답변
+20 포인트
6년 전
저도 님과 같은 것을 고민했었는데요.
선택값 별로는 안돼네요.
그래서... 꿩대신 닭 잡았어요.
그냥 셀렉트 태그에 배경색을 상태별로 다르게 주었습니다. ^^; 참고하세요
Copy
<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>
답변에 대한 댓글 1개
6년 전
Copy
<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
6년 전
답변을 작성하려면 로그인이 필요합니다.