19'C 흐림
서울 강남구
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<body>
<div id="select_ctrl_wrap">
<select id="sel">
<option value="">선택해주시오</option>
<option value="a">사랑에빠진딸기</option>
<option value="b">엄마는외계인</option>
<option value="c">아몬드봉봉</option>
<option value="d">뉴욕치즈케이크</option>
<option value="e">초코나무숲</option>
<option value="f">체리쥬빌레</option>
</select>
<div class="result">
<div>
<label for="ice_value">- 선택된 옵션의 value 구하기</label>
<input type="text" id="ice_value" readonly="">
</div>
<div>
<label for="ice_name">- 선택된 옵션의 text 구하기</label>
<input type="text" id="ice_name" readonly="">
</div>
<div>
<label for="ice_index">- 선택된 옵션의 index 구하기</label>
<input type="text" id="ice_index" readonly="">
</div>
<div>
<label for="ice_size">- 선택된 옵션의 갯수 구하기</label>
<input type="text" id="ice_size" readonly="">
</div>
<div>
<label for="ice_name">- 선택된 이미지 구하기</label>
<span id="ice_img"><img src="http://cfs.tistory.com/custom/blog/224/2249595/skin/images/no_img.gif" alt="ice"></span>
</div>
</div>
</div>
<!-- //wrapper -->
<style type="text/css">
#select_ctrl_wrap{text-align:center; border:1px solid #ddd; padding:10px; background:#d4d4ff;}
#select_ctrl_wrap label {
display:inline-block;
width:145px;
font-size:11px;
text-align:left;
letter-spacing:-0.05em;
vertical-align:top;
}
#select_ctrl_wrap select,
#select_ctrl_wrap .result input {
height:34px;
border:1px solid #e4e5e7;
margin-bottom:5px;
}
#select_ctrl_wrap select {width:347px;}
#select_ctrl_wrap .result input {
width:200px;
height:26px;
text-align:center;
background-color:#eee;
}
#select_ctrl_wrap #ice_img {
display:inline-block;
width:200px;
height:200px;
border:1px solid #e4e5e7;
}
#select_ctrl_wrap #ice_img img {width:100%;}
</style>
<script>
$(function() {
$("#sel").unbind("change").bind("change", function() {
var val = $("#sel option:selected").val();
var nm = $("#sel option:selected").text();
var index = $("#sel option").index($("#sel option:selected"));
var size = $("#sel option").size();
if ($("#sel option:selected").val() == "") {
//초기화
$(".result").find("#ice_value").val("");
$(".result").find("#ice_name").val("");
$(".result").find("#ice_index").val("");
$(".result").find("#ice_size").val("");
$(".result").find("#ice_img").find("img").attr("src", "http://cfs.tistory.com/custom/blog/224/2249595/skin/images/no_img.gif");
} else if ($("#sel option:selected").val() == val) {
$(".result").find("#ice_value").val(val); //값
$(".result").find("#ice_name").val(nm); //내용
$(".result").find("#ice_index").val(index-1); //인덱스
$(".result").find("#ice_size").val(size-1); //갯수
$(".result").find("#ice_img").find("img").attr("src", "http://cfs.tistory.com/custom/blog/224/2249595/skin/images/ice_" + val + ".jpg"); //이미지
}
});
});
</script>
</body>
</html>