jquery根據下拉框選擇的值顯示輸入框

原理就是根據下拉框選擇的值來控制顯示那個輸入框；

 

html代碼：

 

首先定義一個下拉框，$serviceTypeList就是后台傳過來的所有屬性，

<div class="uk-form-group">
    <label class=" uk-form-label">產品屬性</label>
    <div class="uk-form-controls">
        <select data-dux="form-select" name="product_type_id" required>
            <option value="">-請選擇屬性-</option>
            <!--loop{$serviceTypeList as $vo}-->
            <option value="{$vo.type_id}" <!--if{$product_type_id == $vo.type_id}-->
            selected<!--{/if}--> >{$vo.type_name}</option>
            <!--{/loop}-->
        </select>
    </div>
</div>

定義兩個輸入框

<input  id="mian" type="text" name="area_limit" value="{$info.area_limit}" placeholder="請輸入面積限制"></div>

<input id="ge" type="text" name="number_limit" value="{$info.number_limit}" placeholder="請輸入個數限制"></div>


jquery代碼：
設置監聽事件，當下拉框的值被改變了，判斷這個值

$('#checkPointExpress').on("change",function(){
    if ( document.getElementById('checkPointExpress').value == 1){
        $('#mian').show();
        $('#ge').hide();
}else {
        $('#ge').show();
        $('#mian').hide();
    }
})