관계에 따른 메뉴 구성방안 정보
JavaScript 관계에 따른 메뉴 구성방안본문
금일 제작의뢰에 5단계 하위메뉴 구성에 대한 의뢰가 있어서 사전 작업중 다른분이 채택되어 못 써먹게 되어 아쉬워 여기에라도 남겨봅니다.
코드는 총 5단계(10자리)로 되어 있으며 2자리마다 하위메뉴로 내려가게 해뒀습니다.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
var sitecode = [];
sitecode.push([1000000000, "내용1", ""]);
sitecode.push([1010000000, "내용2", ""]);
sitecode.push([1010100000, "내용3", ""]);
sitecode.push([1010120000, "내용3-1", ""]);
sitecode.push([1010120100, "내용3-1-1", ""]);
sitecode.push([1010120200, "내용3-1-2", ""]);
sitecode.push([1010120300, "내용3-1-3", ""]);
sitecode.push([1010130000, "내용3-2", "3"]);
sitecode.push([1010101000, "내용4", ""]);
sitecode.push([1010101100, "내용4-1", ""]);
sitecode.push([1010101010, "내용45", "abc"]);
sitecode.push([1010101012, "내용46", "abc"]);
sitecode.push([1010101013, "내용47", "abc"]);
sitecode.push([1010101110, "내용55", "URL주소"]);
sitecode.push([1010101112, "내용56", "abc"]);
sitecode.push([1010101113, "내용57", "abc"]);
sitecode.push([2000000000, "대1", ""]);
sitecode.push([3000000000, "대2", ""]);
sitecode.push([4000000000, "대3", ""]);
sitecode.push([5000000000, "대4", ""]);
var step_arr = ["100000000","1000000","10000","100","1"];
function change_sel(sel_value, tf = true){
if(sel_value == ""){
sel_new();
return false;
}
var step = 0;
for(i = step_arr[0]; i >= 1; i = i/100){
if(sel_value % i == 0){
break;
}
step++;
}
tmp = step + 1;
$("select#sel_step"+tmp+" option").remove();
$("select#sel_step"+tmp).append("<option value=\""+sel_value+"\">전체</option>");
if(tmp > step_arr.length){
return false;
}
for(i = tmp + 1; i < step_arr.length; i++){
$("select#sel_step"+i).css('display', 'none');
}
$("select#sel_step"+tmp).css('display', 'block');
for(i = 0; i < sitecode.length; i++){
if(sitecode[i][0] == sel_value && sitecode[i][2] != ""){
if(tf){
alert(sitecode[i][2]);
}
break;
}
if(
(sitecode[i][0]%step_arr[step]) != 0
&& (sitecode[i][0]%step_arr[tmp]) == 0
&& sitecode[i][0]%sel_value < step_arr[step]
){
$("select#sel_step"+tmp).append("<option value=\""+sitecode[i][0]+"\">"+sitecode[i][1]+"</option>");
}
}
}
function sel_new(){
$("select#sel_step0 option").remove();
for(i = 1; i < step_arr.length; i++){
$("select#sel_step"+i).css('display', 'none');
}
$("select#sel_step0").append("<option value=\"\">전체</option>");
for(i = 0; i < sitecode.length; i++){
if(sitecode[i][0]%step_arr[0] == 0){
$("select#sel_step0").append("<option value=\""+sitecode[i][0]+"\">"+sitecode[i][1]+"</option>");
}
}
}
function select_sel(sel_value){
var step = 0;
for(i = 100000000; i >= 1; i = i/100){
if(sel_value % i == 0){
break;
}
step++;
}
var sub_sel_value = "";
var start_str = 2;
for(cnt = 0; cnt <= step; cnt++){
$("select#sel_step"+cnt).css('display', 'block');
sub_sel_value = sel_value.substr(0, start_str);
sub_sel_value = sub_sel_value * step_arr[cnt];
change_sel(sub_sel_value, false);
$("#sel_step"+cnt).val(sub_sel_value);
start_str = start_str + 2;
}
}
$(document).ready(function() {
sel_new();
//페이지가 지정되었을 경우
//select_sel("1010100000");
});
</script>
<select id="sel_step0" name="sel_step0" onchange="change_sel(this.value);" class="sel_step">
</select>
<select id="sel_step1" name="sel_step1" onchange="change_sel(this.value);" class="sel_step">
</select>
<select id="sel_step2" name="sel_step2" onchange="change_sel(this.value);" class="sel_step">
</select>
<select id="sel_step3" name="sel_step3" onchange="change_sel(this.value);" class="sel_step">
</select>
<select id="sel_step4" name="sel_step4" onchange="change_sel(this.value);" class="sel_step">
</select>
추천
1
1
댓글 1개
감사합니다.
출처 남겨놓으면 될까요?
출처 남겨놓으면 될까요?