select박스 option 옵션중 특정 문자에만 css적용 가능한가요?

select박스 option 옵션중 특정 문자에만 css적용 가능한가요?

QA

select박스 option 옵션중 특정 문자에만 css적용 가능한가요?

본문

아래 이미지 처럼, "사용함" 으로 설정되 있으면 테이블 tr 전체 배경색을 변경가능한가요?

안된다면, "사용함" 폰트 색상이라도 변경해서 보기 편하게 하고 싶은데 html,css 조금 알고 있어서

구굴리 해보니 요런게 있어 해봤는데. select박스 안에 있는 글자라 적용이 안되네요 ㅠㅠ

<script>
$("option:contains('사용함')").css({color:"red"});
</script>

3731700699_1627285587.7524.png

 

 


        <td class="td_mng">
            <label for="spl_use_<?php echo $i; ?>" class="sound_only">사용여부</label>
            <select name="spl_use[]" id="spl_use_<?php echo $i; ?>">
                <option value="1" <?php echo get_selected('1', $spl_use); ?>>사용함</option>
                <option value="0" <?php echo get_selected('0', $spl_use); ?>>사용안함</option>
            </select>
        </td>

이 질문에 댓글 쓰기 :

답변 4


$(function() {    
  $('.spluse').on('change', function() {      
    var tr = $(this).closest('tr');
    if ($(this).val() == '1')
        tr.css('background', '#ccc');
    else
        tr.css('background', '#fff');
  });
  
  $('.spluse').each(function() {            
    var tr = $(this).closest('tr');
    if ($(this).val() == '1')
        tr.css('background', '#ccc');
    else
        tr.css('background', '#fff');
  });
});

select에 class를 하나 추가하세요. 

예) class="spluse"

 

스크립트는 아래처럼

$(function() {

    $('.spluse').css('color', 'red'); // 셀렉트 기본값이 "사용함"이므로 모두 폰트 색상 변경

    $('.spluse').change(function() {

        var idx = $(this).index('.spluse');

        var val = $(this).val();

        if(val==1) {

            $(this).css('color', 'red');

        } else {

            $(this).css('color', '#000');

        }

    });

});

 

// 만약 동적 테이블을 사용한다면 jquery 코드를 조금 변경해야 합니다.

소중한 시간 내어주셔서 감사합니다. 적용해보았는데. 둘다 빨강으로 표시가 됩니다, 사용함 기본에서 사용안함으로 선택을 하면 검정으로 변하지만 저장을 하고 다시 보면 둘다 빨강색으로 적요되네요 ;;

select 값 변경하면 감지하는 javascript 로

변경시에 tr 에다가 class를 먹여요

css로 border 넣어두시구요

 

그리고 초기화면 php 로 리스트 불러올때

select값이 사용함이면 tr에다가 미리 class 추가해줘야겠죠


$(function() {    
  $('.spluse').on('change', function() {      
    var tr = $(this).closest('tr');
    if ($(this).val() == '1')
        tr.css('background', '#ccc');
    else
        tr.css('background', '#fff');
  });
});

소중한 시간 내어주셔서 감사합니다. 처음부터 적용은 안되고 한번 사용안함으로 갔다가 사용함으로 선택하면 tr 배경이 다 변하네요 ㅎㅎ 그래서 인지 저장하고 나갔다 오면 다시 적용이 안되있네요 ;;; 아직 제가 많이 부족하네요 ㅎㅎ 댓글 감사합니다.

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

회원로그인

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