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();
    }
})