select박스 option 옵션중 특정 문자에만 css적용 가능한가요?
본문
아래 이미지 처럼, "사용함" 으로 설정되 있으면 테이블 tr 전체 배경색을 변경가능한가요?
안된다면, "사용함" 폰트 색상이라도 변경해서 보기 편하게 하고 싶은데 html,css 조금 알고 있어서
구굴리 해보니 요런게 있어 해봤는데. select박스 안에 있는 글자라 적용이 안되네요 ㅠㅠ
<script>
$("option:contains('사용함')").css({color:"red"});
</script>
<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 배경이 다 변하네요 ㅎㅎ 그래서 인지 저장하고 나갔다 오면 다시 적용이 안되있네요 ;;; 아직 제가 많이 부족하네요 ㅎㅎ 댓글 감사합니다.