셀렉트박스에 선택값별 색상 다르게 하려면?

셀렉트박스에 선택값별 색상 다르게 하려면?

QA

셀렉트박스에 선택값별 색상 다르게 하려면?

본문

어쩌면 기초적인 질문인지는 모르겠습니다.

아래와 같이 셀렉트박스를 작성하였는데요.

여기서 각 선택값별로 색상을 다르게 주는 방법이 있을까요?

 

    <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

 

답변을 작성하시기 전에 로그인 해주세요.
전체 110
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT