Second life's Diary

글 작성자: 연i
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
반응형
이 글은 본 저작자 표시, 비영리, 변경 금지 규칙 하에 배포할 수 있습니다. 자세한 내용은 Creative Commons 라이선스를 확인하세요.

'Working Hard' 카테고리의 다른 글

[HTML/CSS] Entity Code (엔티티코드)  (0) 2021.01.05
[Can i use?] 내가 쓰고자 하는 태그야, 실행할 수 있니?  (2) 2020.12.20
[하드코딩 아카이브] 시작하기.  (0) 2020.12.19
다른 글 더 둘러보기
Second life's Diary 블로그의 첫 페이지로 이동

티스토리툴바