개발자.. 너란놈..

Select와 Option으로 사용 시 스타일링의 어려움이 있기 때문에 아래와 같이 ul 과 li로 구성 하였습니다.

HTML

<div class="dropdown">
    <div class="dropdown-selected">Select an option</div>
    <ul class="dropdown-options">
        <li data-value="1">Option 1</li>
        <li data-value="2">Option 2</li>
        <li data-value="3">Option 3</li>
        <li data-value="4">Option 4</li>
    </ul>
</div>

CSS (SASS)

.dropdown {
    position: relative;
    width: 250px;

    /* 선택된 항목 표시 */
    .dropdown-selected {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f9f9f9;
        cursor: pointer;
        font-size: 16px;
        color: #333;
    }

    /* 화살표 표시 */
    .dropdown-selected::after {
        content: "▼";
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        font-size: 12px;
        color: #333;
    }

    /* 옵션 목록 */
    .dropdown-options {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        width: 100%;
        border: 1px solid #ccc;
        background-color: #fff;
        z-index: 100;
        border-radius: 4px;
        max-height: 150px;
        overflow-y: auto;

        &.show {
            display: show;
        }

        /* 옵션 항목 */
        li {
            padding: 10px;
            cursor: pointer;

            /* 호버 및 선택된 항목 스타일 */
            &:hover{
                background-color: #007bff;
                color: #fff;
            }

            &.selected{
                background-color: #007bff;
                color: #fff;
            }
        }
    }
}

아래는 참고용으로 Vue로 Select Option을 제대로 이벤트 동작하게끔 하기 위해 정리합니다.

Vue

<div class="dropdown" ref="dropdown">
    <div class="dropdown-selected" @click="toggleDropdown">Select an option</div>
    <ul class="dropdown-options" v-if="isOpen">
        <li data-value="1" @click="selectOption(1)">Option 1</li>
        <li data-value="2" @click="selectOption(2)">Option 2</li>
        <li data-value="3" @click="selectOption(3)">Option 3</li>
        <li data-value="4" @click="selectOption(4)">Option 4</li>
    </ul>
</div>

export default{
	data() {
        return {
            isOpen:false
        }
    },
    methods: {
    	toggleDropdown() {
            this.isOpen = !this.isOpen;
        },
        selectOption(option) {
            this.selectedText = option.text;
            this.isOpen = false;
        },
        handleClickOutside(event) {
            // dropdown 외부 클릭 시 드롭다운 닫기
            if (!this.$refs.dropdown.contains(event.target)) {
                this.isOpen = false;
            }
        }
    },
    mounted() {
        document.addEventListener('click', this.handleClickOutside);
    },
    beforeDestroy() {
        document.removeEventListener('click', this.handleClickOutside);
    },    
}

오랜만에 C#으로 찾아왔습니다.

Linq 라는 것은 데이터와 데이터를 비교하여 필요한 데이터를 다시 새롭게 재 구성하기 위해서 쓰는 것이라고 요번에 습득 하였습니다.

이번 로직을 만들면서 2가지를 다시 배웠습니다.

1. LinQ는 데이터와 데이터를 재 구성하여 필요한 데이터만 찾을 수 있다.

2. DataTable에도 타입이 존재한다.

2번 같은 경우는 select를 다시 할 때 무척이나 애 먹었습니다..

실제 오라클 테이블에 Number로 정의가 되어있어서 데이터테이블로 데이터를 가져왔을때 컬럼 타입이 Int32로 구성되어있어서 그 부분을 확인 하지 못해 엄청난 삽질을 하였습니다.

아래는 제가 Linq를 사용하여 데이터를 구성한 로직입니다.

감사합니다.

//APIdt , Resultdt는 데이터 테이블 형식 입니다. 
var query = (from APIData in APIdt.AsEnumerable()
			 join dbData in Resultdt.AsEnumerable()
			 on new
			 {
				 //비교할 이름을 같게 해주어야 합니다. TEST1 , TEST2
				 TEST1 = APIData.Field<string>("TEST1"),
				 TEST2 = APIData.Field<string>("TEST2")
			 }
			 equals new
			 {
				//비교할 이름을 같게 해주어야 합니다. TEST1 , TEST2
				 TEST1 = dbData.Field<string>("TEST1"),
				 TEST2 = dbData.Field<string>("TEST2")
			 }
			 select new
			 {
				 //Field 형식이 굉장히 중요하기 떄문에 데이터테이블의 타입이 어떤것인지 꼭 확인이 필요합니다. 
				 //Test1 , Test2 , Test3 , Test4는 변수입니다. 
				 Test1 = APIData.Field<string>("REQ_SVC"),
				 Test2 = dbData.Field<int>("FCL_CNT"),
				 Test3 = dbData.Field<int>("LCL_CNT"),
				 Test4 = dbData.Field<int>("CONSOL_CNT")
			 });                    

//데이터테이블을 생성 해 줍니다.
DataTable Final_DT = new DataTable();
Final_DT.Columns.Add("Test1");
Final_DT.Columns.Add("Test2");
Final_DT.Columns.Add("Test3");
Final_DT.Columns.Add("Test4");

//구성된 데이터를 다시 데이터테이블로 만들어줍니다. 
foreach (var item in query)
{
	DataRow Final_Dr = Final_DT.NewRow();
	Final_Dr["Test1"] = item.Test1;
	Final_Dr["Test2"] = item.Test2;
	Final_Dr["Test3"] = item.Test3;
	Final_Dr["Test4"] = item.Test4;
	Final_DT.Rows.Add(Final_Dr);
}

완성된 데이터 테이블
Final_DT

똑같은 Name으로 2개의 Select가 있을 경우 Change 함수를 이용하여 한번에 2개 데이터를 바꾸고, Selected 값도 바꾸는 로직

$(document).on("change", "select[name='select_SolutionQ_Email']", function () {
	//pc와 mo의 데이터 동기화
	$("input[name='SolutionQ_Email2']").eq(0).val($(this).find('option:selected').val()); //pc
	$("input[name='SolutionQ_Email2']").eq(1).val($(this).find('option:selected').val()); //mo

	//선택한 값의 index 번호를 가져와서 동일한 name의 select 태그의 index의 option으로 selected 시켜주는 로직 입니다.
	$("select[name='select_SolutionQ_Email']").eq(0).find("option").eq($(this).find('option:selected').index()).attr('selected', 'selected');
	$("select[name='select_SolutionQ_Email']").eq(1).find("option").eq($(this).find('option:selected').index()).attr('selected', 'selected');
});

TO_CHAR ((숫자), 'FM999999999999990.00') AS 알리아스

bold 처리 해둔 곳은 원하는 소수점 자리만큼 적으면 됩니다.

2개면 2자리 , 3개면 3자리 까지

EX) 12345.1 => 12345.10  (2자리)

EX) 12345.1 => 12345.100 (3자리)

TO_CHAR ((숫자), 'FM999,999,999,999,990.00') AS 알리아스

중간에 콤마를 넣으면 3자리 마다 ,가 찍힙니다.

EX) 12345.1 => 12,345.10  (2자리)

EX) 12345.1 => 12,345.100 (3자리)