728x90 셀렉트박스4 [HTML/javascript] 옵션 선택에 따라 달라지는 셀렉트 박스 Cascading dropdown 상위 셀렉트박스에서 어떤 옵션을 선택하는지에 따라 다음 셀렉트박스의 옵션 내용이 바뀐다. 자바스크립트가 필요하다. https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp How To Create a Cascading DropdownW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com 위의.. 2023. 6. 24. [javascript] 커스텀 스타일링 SELECT 박스 만들기 HTML, CSS를 수정해서 셀렉트박스를 꾸밀 수도 있지만 한계가 있다. select 태그 자체를 꾸민다해도 option 박스는 기본 디자인에서 크게 벗어나지 못하며, 모바일에서는 폰 자체 UI가 적용되기때문이다. 웹디자이너분이 넘기는 시안은 보통 커스텀 셀렉박스인데 사실 나는 코딩하는 입장에서 귀찮기때문에 웬만하면 복잡한 스타일링을 지양하고싶긴하다ㅎㅎ 아무튼 기본 UI에서 벗어나기 위해 자바스크립트를 이용해 스타일링을 해보자. 옵션값이 중복으로 들어가는 다소 귀찮은 코드이다. 그래도 모바일에서 꾸며진 모습이 깔끔해 맘에 든다. See the Pen Custom select box by sel (@wimmwell) on CodePen. 코드펜의 콘솔을 열어서 확인해보면 옵션 값을 선택할때마다 값이 찍히는.. 2023. 5. 22. [HTML] Select 박스 옵션 타이틀 항목 나타내기 셀렉트 박스에 옵션값을 입력하면 첫번째 옵션이 셀렉트박스에 노출이 된다. 예시 7일 3개월 1년 첫 옵션값 대신에 옵션들의 타이틀을 입력하고 싶은 경우 옵션에 disabled hidden selected 속성을 이용하면 된다. 옵션이 숨겨지고 선택 불가능한 상태로 활성화된다. 예시 구독 기간 7일 3개월 1년 코드 구독 기간 7일 3개월 1년 2023. 1. 2. [javascript] 체크박스 클릭으로 selectbox의 disabled 속성 추가/제거하기 input 체크박스를 체크/해제시 selectbox의 disabled 속성이 토글되는 코드이다.체크박스 체크 여부를 확인하는 속성은셀렉터.checked /* 240711 본문 수정*/jQuery -> javascript disabled 속성 제거하기: removeAttribute('disabled');disabled 속성을 disabled로 설정: setAttribute('disabled', 'disabled'); 코드펜 예제 See the Pen Undisable selectbox o checkbox click by sel (@wimmwell) on CodePen.+jQuery에서는disabled 속성 제거하기: removeAttr('disabled');disabled 속성을 disabled로 설정:.. 2022. 4. 25. 이전 1 다음 728x90
