select box 옵션 선택 시, 선택 된 값 스타일 변화
// selected 주기 위함
<?php
$selectBTS = "";
$selectTWICE = "";
if($_REQUEST['singsel'] == "BTS"){
$selectBTS = "selected";
}else if($_REQUEST['singsel'] == "TWICE"){
$selectTWICE = "selected";
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- style 주기 -->
<style>
.register_account { color: #FF0000; background: white; }
option:not(:checked) { color: #000000; background: white; }
</style>
</head>
<body>
<select id="singsel">
<option value ="">가수들</option>
<option value="BTS" <?=$selectBTS?>>BTS</option>
<option value="TWICE" <?=$selectTWICE?>>TWICE</option>
</select>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(function() {
// singsel 의 값이 있으면 class 값 주기
if($("#singsel").val()){
$("#singsel").addClass('register_account');
}
// singsel change
$("#singsel").change(function() {
var singsel = $("#singsel").val();
if(singsel){
location.href="<?=$_SERVER['PHP_SELF']?>?singsel="+singsel;
}else{
location.href="<?=$_SERVER['PHP_SELF']?>";
}
});
});
</script>
</body>
</html>
결과
value 없을 때
값 선택 전
값 선택 시 글씨 색 변경
'Javascript > JQuery' 카테고리의 다른 글
| [JQuery] Append 이용한 Row 추가 삭제 (0) | 2017.08.28 |
|---|