๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
ํ”„๋กœ์ ํŠธ ๊ธฐ๋ก

select๋ฌธ ํ…Œ์ŠคํŠธ์šฉ ์†Œ์Šค

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2021. 2. 15.
๋ฐ˜์‘ํ˜•
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
    $(function() {
        $("select#sel1").on("change", function() {
        	$("select#sel2 option").remove();
        	if($(this).val()==1){
        		$("select#sel2").append("<option value='๊ฐœ1'>๊ฐœ1</option>");
        		$("select#sel2").append("<option value='๊ฐœ2'>๊ฐœ2</option>");
        		$("select#sel2").append("<option value='๊ฐœ3'>๊ฐœ3</option>");    		
        	}else if($(this).val()==2){
        		$("select#sel2").append("<option value='๊ณ ์–‘์ด1'>๊ณ ์–‘์ด1</option>");
        		$("select#sel2").append("<option value='๊ณ ์–‘์ด2'>๊ณ ์–‘์ด2</option>");
        		$("select#sel2").append("<option value='๊ณ ์–‘์ด3'>๊ณ ์–‘์ด3</option>");
        	}

        });

    });

    </script>
</head>
<body>
<a href="#">ํด๋ฆญ</a>
<div>
   <select id="sel1">
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
   </select>
</div>
<div>
   <select id="sel2">
   </select>
</div>
</body>
</html>

 

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ

'ํ”„๋กœ์ ํŠธ ๊ธฐ๋ก' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

2020/10/8 ํ”„๋กœ์ ํŠธ ๊ธฐ๋ก  (0) 2021.02.15
2020/10/5 ํ”„๋กœ์ ํŠธ ๊ธฐ๋ก  (0) 2021.02.15
2020/9/9 ํ”„๋กœ์ ํŠธ ๊ธฐ๋ก  (0) 2021.02.15
JQuery๋กœ ์˜ˆ์•ฝ ์‹œ๊ฐ„ ์กฐ์ •  (0) 2021.02.15
์˜ˆ์•ฝ ์„ ํƒ ์ทจ์†Œ ๊ธฐ๋Šฅ ์ถ”๊ฐ€  (0) 2021.02.15

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”