jQuery Select Box 선택값 제어

jQuery 로 select 박스가 2개인 것의 값을 제어하는 걸 테스트하고 적어둔다.

 

여기서 알아둘 사항은 Javascript/jQuery 로 현재 URL, 경로 가져오는 방법이다.

//window.location is an object in javascript. window.location.host             #returns host window.location.hostname     #returns hostname window.location.path             #return path window.location.href             #returns full current url window.location.port             #returns the port window.location.protocol       #returns the protocol // in jquery you can use $(location).attr('host');          #returns host $(location).attr('hostname');  #returns hostname $(location).attr('path');         #returns path $(location).attr('href');         #returns href $(location).attr('port');         #returns port $(location).attr('protocol');   #returns protocol // To get the URL of the parent window from within an iframe $(window.parent.location).attr('href');

http://www.abc.com:8082/index.php#tab2?foo=789 Property                                Result ---------------------------------------------------- $(location).attr('host')            www.abc.com:8082 $(location).attr('hostname')    www.abc.com $(location).attr('port')            8082 $(location).attr('protocol')      http: $(location).attr('pathname')   index.php $(location).attr('href')           http://www.abc.com:8082/index.php#tab2 $(location).attr('hash')         #tab2 $(location).attr('search')       ?foo=789

 

 

기본적인 HTML 문법과 PHP를 혼용하여 사용하고 있다.

PHP는 대체문법을 사용하여 깔끔하게 보기좋게 정렬을 하고 있고, 함수화를 통해서 코드를 심플하게 보이도록 구현되어 있다.

 

<?php
include_once "connect.php";
include_once "dbDataClass.php";
$d = new DBDataClass();
$cat1 = isset($_GET['cat1'])? $_GET['cat1'] : 0;
$cat2 = isset($_GET['cat2'])? $_GET['cat2'] : 0;
?>
구분1 <select name="cat1" id="cat1">
    <option value="">+ 구분</option>
    <?php $_CAT1 = $d->getDbArray('menu_items', 'parent_id=0', '*', '', 0, 1);?>
    <?php while($_CA1 = mysqli_fetch_array($_CAT1)):?>
    <option value="<?php echo $_CA1['id']?>"<?php if($_CA1['id']==$cat1):?> selected<?php endif ?>><?php echo $_CA1['name']?></option>
    <?php endwhile ?>
    </select>
 
    &nbsp;&nbsp;&nbsp;구분2
    <select name="cat2" id="cat2">
    <option value="">+ 구분</option>
    <?php if($cat1):?>
    <?php $_CAT2 = $d->getDbArray('menu_items', 'parent_id='.$cat1, '*', '', 0, 1); ?>
    <?php while($_CA2 = mysqli_fetch_array($_CAT2)):?>
    <option value="<?php echo $_CA2['id']?>"<?php if($_CA2['id']==$cat2):?> selected<?php endif ?>>ㆍ<?php echo $_CA2['name']?></option>
    <?php endwhile ?>
    <?php endif ?>
    </select>&nbsp;&nbsp;&nbsp;
    <!--구분 -->
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#cat1').on('change',function(){
    var cat1 = $("#cat1 option:selected").val(); // this.value
    location.href = $(location).attr('pathname') + '?cat1='+cat1;
});
$('#cat2').on('change',function(){
    var cat1 = $("#cat1 option:selected").val();
    var cat2 = $("#cat2 option:selected").val();
    location.href = window.location.pathname + '?cat1='+cat1+'&cat2='+cat2;
});
</script>

 

 아래 코드 예시는 Secure Coding을 고려하여 작성한 코드 중에서 필요한 부분만 발췌하여 적은 것이다.

MDB(Material Design Bootsrap4) 코드를 적용한 select 가 포함되어 있다.

<?php
$link_url = "MemberList.php"; // 현재 실행중인 파일명 가져오기
$rowsPage = 10; // 한 화면에 표시되는 게시글 수
$curPage = isset($_GET['p']) ? $a->NoFilter($_GET['p']) : 1;
$m = isset($_GET['m']) ? $a->XSSFilter($_GET['m']) :'list';
$cat1 = isset($_GET['cat1']) ? $a->XSSFilter($_GET['cat1']) :'';
 
$g['url_link']=($m?'m='.$m.'&amp;':'').($cat1?'&amp;cat1='.$cat1.'&amp;':'').($where?'where='.$where.'&amp;':'').($keyword?'keyword='.urlencode(stripslashes($keyword)).'&amp;':'');
$g['bbs_reset'] = $link_url.'?'.($m?'m='.$m.'&amp;':'');
 
?>
 
<div class="table-responsive text-nowrap">
<p class="h4 mb-4">회원 현황</p>
<div class="float-left info">
    <?php if( $keyword ):?><strong>"<?php echo $keyword?>"</strong> 검색결과 : <?php endif?>
    <?php echo number_format($NUM)?>개 (<?php echo $curPage;?>/<?php echo $TPG;?>페이지)
</div>
 
<?php if($_SESSION['authID'] == 2):?>
<div class="float-right info">
<select id="cat1" class="browser-default custom-select">
<?php $cats = $a->getDbArray('orgTree', 'parent_id=0', '*', '', 0, 1);?>
    <option value="">-본부-</option>
    <?php foreach($cats as $C): ?>
        <option value="<?php echo $C['id'];?>"<?php if($C['id']==$cat1):?> selected<?php endif;?>><?php echo $C['name'];?></option>
    <?php endforeach;?>
</select>
</div>
<?php endif;?>
 
<script>
$('#cat1').on('change',function(e){
    e.preventDefault();
    var cat1 = $("#cat1 option:selected").val(); // this.value
    var uri = $('#urlPath').attr('url-path');
    MemberListTable(where,keyword,curPage,uri,cat1);
});
</script>