MDB4 select

Web 프로그램/MDB 2022. 2. 12. 21:34
728x90

mdbootstrap4 기반 select

https://mdbootstrap.com/docs/b4/jquery/forms/select/

 

Bootstrap Select - examples & tutorial. Basic & advanced usage

Bootstrap select is a form control which after a click displays a collapsable list of multiple values which can be used in forms, menus or surveys.

mdbootstrap.com

<select class="browser-default custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

 

 

MySQL DB 기반 select

 

<?php
require_once 'config.php';
require_once 'dbconnect.php';
 
$sql = "SELECT DISTINCT YM FROM customer ORDER BY YM DESC LIMIT 3";
$result = mysqli_query($db$sql);
?>
 
<form id="form" class="text-center border border-light p-5">
 
    <p class="h4 mb-4">Data 업데이트</p>
 
    <select class="browser-default custom-select" name="ym">
      <option value="" selected>-년월-</option>
    <?php
    while($R = mysqli_fetch_row($result)):
        echo '<option value="'.$R[0].'">'.$R[0].'</option>';
    endwhile;
    ?>
    </select>
 
    <div>
        <button type="submit" id="btnSubmit" class="btn btn-outline-default">전송</button>
        <button type="reset" id="btnReset" class="btn btn-outline-default">취소</button>
    </div>
    <br/>
</form>
 
<script>
$('#form').submit(function(e) {
    e.preventDefault();
    var yearmonth = $("select[name=ym]").val();
    if(yearmonth == '') {
        alert('연월을 선택하세요');
        $("select[name=ym]").focus();
        return false;
    }
 
    $.ajax({
        url: phpUpfilename,
        type: 'POST',
        data: { YM : yearmonth },
        dataType: 'text',
        success: function (data) {
            console.log(data);
            alert(data);
        },
        error: function(data) {
            alert("error in ajax form submission");
        }
    });
});
</script>
 

 

 

 

 

블로그 이미지

Link2Me

,