國泰產險

下拉選單 - 以建材為例

元件：select001

JS：https://insweb.doinsane.co/js/comp/select001.js

Static

Preview

HTML


<div class="tw-form-group">
    <div class="tw-relative">
        <div select001 data-plugin="comp/select001" data-type="comp" data-comp-name="select001">
        <select class="tw-h-0 tw-w-0 tw-opacity-0" onchange="doCheckSelect(event);" multiple data-search="false" data-placeholder="請選擇" name="mainStructure" id="mainStructure">
            <option value="22">鋼筋混凝土</option>
            <option value="01">鋼筋水泥</option>
            <option value="02">磚水泥</option>
            <option value="27">鋼筋磚水泥</option>
            <option value="31">鋼骨水泥</option>
            <option value="53">鋼骨混凝土</option>
            <option value="21">加強磚</option>
            <option value="54">鋼骨鋼筋混凝</option>
        </select>
        </div>
    </div>
    <div style="display: none" class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>

Static Default Value

Preview

HTML

對選中的option設定selected


<option value="02" selected>磚水泥</option>


<div class="tw-form-group">
    <div class="tw-relative">
        <div select001 data-plugin="comp/select001" data-type="comp" data-comp-name="select001">
        <select class="tw-h-0 tw-w-0 tw-opacity-0" onchange="doCheckSelect(event);" multiple data-search="false" data-placeholder="請選擇" name="mainStructure" id="mainStructure">
            <option value="22">鋼筋混凝土</option>
            <option value="01">鋼筋水泥</option>
            <option value="02" selected>磚水泥</option>
            <option value="27">鋼筋磚水泥</option>
            <option value="31">鋼骨水泥</option>
            <option value="53">鋼骨混凝土</option>
            <option value="21">加強磚</option>
            <option value="54">鋼骨鋼筋混凝</option>
        </select>
        </div>
    </div>
    <div style="display: none" class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>

Static Default Value (disabled)

Preview

HTML

.tw-form-group加上.tw-has-disabled


<div class="tw-form-group tw-has-disabled">
    ....
</div>

select加上disabled


<select disabled class="tw-h-0 tw-w-0 tw-opacity-0" onchange="doCheckSelect(event);" multiple data-search="false" data-placeholder="請選擇" name="mainStructure2" id="mainStructure2">
    .....
</select>


<div class="tw-form-group tw-has-disabled">
    <div class="tw-relative">
        <div select001 data-plugin="comp/select001" data-type="comp" data-comp-name="select001">
        <select disabled class="tw-h-0 tw-w-0 tw-opacity-0" onchange="doCheckSelect(event);" multiple data-search="false" data-placeholder="請選擇" name="mainStructure2" id="mainStructure2">
            <option value="22">鋼筋混凝土</option>
            <option value="01">鋼筋水泥</option>
            <option value="02" selected>磚水泥</option>
            <option value="27">鋼筋磚水泥</option>
            <option value="31">鋼骨水泥</option>
            <option value="53">鋼骨混凝土</option>
            <option value="21">加強磚</option>
            <option value="54">鋼骨鋼筋混凝</option>
        </select>
        </div>
    </div>
    <div style="display: none" class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>

Example

Preview

設定值為：鋼骨鋼筋混凝


<button type="button" class="tw-btn-small-primary" onclick="setValueToElement('mainStructure3','54');">鋼骨鋼筋混凝</button>

設定值為：加強磚


<button type="button" class="tw-btn-small-primary" onclick="setValueToElement('mainStructure3','31');">加強磚</button>

Disable


<button type="button" class="tw-btn-small-primary tw-mb-8" onclick="setInputStatus(document.querySelector('[name=mainStructure3]'),'disabled');">Disabled</button>

Enabled


<button type="button" class="tw-btn-small-primary tw-mb-8" onclick="setInputStatus(document.querySelector('[name=mainStructure3]'),'default');">Disabled</button>


<script>
    function setValueToElement(name,value){
        let target
        target = document.querySelector('[name='+name+']')
        target.setValue(value);
    }
</script>

Option Data from JSON

Preview

HTML


<div class="tw-form-group">
    <div class="tw-relative">
        <div select001 data-plugin="comp/select001" data-type="comp" data-comp-name="select001">
        <select class="tw-h-0 tw-w-0 tw-opacity-0" onchange="doCheckSelect(event);" multiple data-search="false" data-placeholder="請選擇" name="mainStructure" id="mainStructure"></select>
        </div>
    </div>
    <div style="display: none" class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>

載入資料


<button type="button" class="tw-btn-small-primary tw-mb-8" onclick="getData();">載入資料</button>

Reset


<button type="button" class="tw-btn-small-primary" onclick="resetElement('mainStructure3');">Reset</button>

Clear


<button type="button" class="tw-btn-small-primary" onclick="clearElement();">Clear</button>

JSON download


{
    "mainStructure": {
        "22": "鋼筋混凝土",
        "01": "鋼筋水泥",
        "02": "磚水泥",
        "27": "鋼筋磚水泥",
        "31": "鋼骨水泥",
        "53": "鋼骨混凝土",
        "21": "加強磚",
        "54": "鋼骨鋼筋混凝土"
    }
}

載入資料


<script>
    const mainStructureSelect = document.querySelector('[name=mainStructureDynamic]')
    //
    function initMainStructure(data) {
        const choices = Object.keys(data).map((key) => ({
            value: key,
            label: data[key],
        }))
        mainStructureSelect.setOptions(choices)
        setInputStatus(mainStructureSelect, 'default')
    }
    function getData() {
        setInputStatus(mainStructureSelect, 'disabled')
        //
        fetch('/json/select001-mainStructure.json')
        .then((response) => {
            if (response.ok) {
                return response.json()
            } else {
                throw new Error('Network response was not ok')
            }
        })
        .then((data) => {
            initMainStructure(data.mainStructure)
        })
        .catch((error) => {
            console.error('Error fetching data:', error)
        })
    }
</script>

Reset


<script>
    function resetElement(name){
        let target
        target = document.querySelector('[name='+name+']')
        target.reset();
    }
</script>

Clear


<script>
    function clearElement(){
        let target
        target = document.querySelector('[name=mainStructureDynamic]')
        target.clear();
    }
</script>

Validate Code Reference

請依照實際開發狀況調整


<script>
    function doCheckSelect(event) {
        const targetElm = event.target
        const value = targetElm.value.trim()
        if (value === '' || value === 'null') {
            setInputStatus(targetElm, 'error', '請確認資料是否正確')
        } else {
            setInputStatus(targetElm, 'success')
        }
    }
</script>