728x90
반응형
SelectBox는 요즘같으면 그냥 div, li 태그를 통해서 만드는게 더욱 깔끔하고 이쁘게 만들 수 있다..
하지만 아쉽게도 select 태그를 써야만 할 때도 존재한다... (지금 일하는 곳이 그런 곳이다 ㅠㅠ)
그냥 페이지를 솔루션 없이 제작했다면, 손코딩해서 이쁘게 만들어줄 수 있지만,
솔루션을 사용하고있는 업체를 들어갔다면, 여러가지 원하는 대로 사용할 수 없을 때가
상당히 많아서 너무 슬프다..
암튼, select 태그는 div, li 태그와 다르게 script 로 덮어쓰는 스타일링이 아니라면, 직접 아래와 같이 손코딩 할수밖에 없고,
조금 제약적으로 스타일링 할 수밖에 없다는 한계점이 있다..ㅠㅠ
(슬픔..)
자 그럼, 각각 확인해보쟈
<html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form name="frm1" style="text-align: center; margin-top: 30px;">
<select id="aca_coo" onChange="redirect(this.selectedIndex);">
<option value="0">아래에서 선택해주세요</option>
<option value="1">밥</option>
<option value="2">국</option>
<option value="2">코스</option>
</select>
<select id="aca_2ndcoo" onChange="redirect1(this.selectedIndex);">
</select>
</form>
<div id="calc_btn">
<input type="button" value="확인" onclick="changehtml();" />
</div>
<div id="body_txt">
메뉴를 선택해 주세요. 결과가 나옵니다.
</div>
<br>
<div id="show">
</div>
</body>
</html>pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<css>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
select {
background: url("https://image.flaticon.com/icons/svg/271/271210.svg");
background-color: #fff8dc;
background-repeat: no-repeat;
background-position: right 10px top 15px;
background-size: 16px 16px;
color: white;
padding: 12px 44px 12px 12px;
width: auto;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: normal;
color: #000;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-appearance: none;
border: 0;
outline: 0;
-webkit-transition: 0.3s ease all;
-moz-transition: 0.3s ease all;
-ms-transition: 0.3s ease all;
-o-transition: 0.3s ease all;
transition: 0.3s ease all;
}
#aca_coo {
background-color: #fff8dc;
}
#aca_coo:hover {
background-color: #fff9e3;
}
#aca_2ndcoo {
background-color: #fff8dc;
}
#aca_2ndcoo:hover {
background-color: #fff9e3;
}
select:focus,
select:active {
border: 0;
outline: 0;
}
#calc_btn {
text-align: right;
margin-top: 20px;
}
#show {
margin-top: 20px;
text-align: center;
font-size: 33px;
font-family: 'Lato', sans-serif;
font-weight: 900;
line-height: 45px;
word-break: keep-all;
color: #000;
}
#body_txt {
margin-top: 50px;
font-size: 18px;
font-family: 'Lato', sans-serif;
font-weight: bold;
text-align: center;
line-height: 30px;
word-break: keep-all;
}
<java>
<script type="text/javaScript">
var groups = document.frm1.aca_coo.options.length
var group=new Array(groups)
for (i=0; i<groups; i++){
group[i] = new Array()}
group[0][0] = new Option("카테고리를 선택","a0");
group[1][0] = new Option("카테고리를 선택","a0");
group[1][1] = new Option("쌀밥","a1");
group[1][2] = new Option("콩밥","a2");
group[1][3] = new Option("잡곡밥","a3");
group[2][0] = new Option("카테고리를 선택","a0");
group[2][1] = new Option("미역국","b1");
group[2][2] = new Option("된장국","b2");
group[2][3] = new Option("시레기국","b3");
group[2][4] = new Option("콩나물국","b4");
group[3][0] = new Option("카테고리를 선택","a0");
group[3][1] = new Option("돈까스정식","c1");
group[3][2] = new Option("전주비빔밥세트","c2");
group[3][3] = new Option("도토리묵밥","c3");
group[3][4] = new Option("보쌈정식","c4");
group[3][5] = new Option("부대찌개정식","c5");
var temp=document.frm1.aca_2ndcoo
function redirect(x){
for(m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for(i=0;i<group[x].length;i++)
{temp.options[i]=new Option(group[x][i].text,group[x][i].value)}
temp.options[0].selected=true
redirect1(0);
}
redirect(0);
function changehtml(){
var property = document.getElementById('aca_2ndcoo').value;
var show = document.getElementById('show');
if(property=="a0"){show.innerHTML ='결정장애가 있으신가요?';
}else if(property=="a1") {show.innerHTML ='당신은 쌀밥을 선택하셨습니다.';
}else if(property=="a2") {show.innerHTML ='당신은 콩밥을 선택하셨습니다.';
}else if(property=="a3") {show.innerHTML ='당신은 잡곡밥을 선택하셨습니다.';
}else if(property=="b1") {show.innerHTML ='당신은 미역국을 선택하셨습니다.';
}else if(property=="b2") {show.innerHTML ='당신은 된장국을 선택하셨습니다.';
}else if(property=="b3") {show.innerHTML ='당신은 시레기국을 선택하셨습니다.';
}else if(property=="b4") {show.innerHTML ='당신은 콩나물국을 선택하셨습니다.';
}else if(property=="c1") {show.innerHTML ='당신은 돈까스정식을 선택하셨습니다.';
}else if(property=="c2") {show.innerHTML ='당신은 전주비빔밥세트를 선택하셨습니다.';
}else if(property=="c3") {show.innerHTML ='당신은 도토리묵밥을 선택하셨습니다.';
}else if(property=="c4") {show.innerHTML ='당신은 보쌈정식을 선택하셨습니다.';
}else if(property=="c5") {show.innerHTML ='당신은 부대정식을 선택하셨습니다.';
}
}
</script>
동적 셀렉트 박스이기 때문에 스크립트는 body 태그가 종료된 후에 넣어주어야 한다!!
728x90
반응형
'Working Hard' 카테고리의 다른 글
| [HTML/CSS] Entity Code (엔티티코드) (0) | 2021.01.05 |
|---|---|
| [Can i use?] 내가 쓰고자 하는 태그야, 실행할 수 있니? (2) | 2020.12.20 |
| [하드코딩 아카이브] 시작하기. (0) | 2020.12.19 |