select下拉框内容改变,input框内容随之改变

  • Post author:
  • Post category:其他


机器类型发生改变,将机器类型对应的激活金额赋值给input框

在这里插入图片描述

<div class="form-group">    
    <label class="col-sm-3 control-label">激活金额:</label>
    <div class="col-sm-8">
        <input name="actAmt" th:field="*{actAmt}" class="form-control" type="text" readonly/>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label">机器类型选择:</label>
    <div class="col-sm-8">
        <select id = "type" name="type" class="form-control m-b">
            <option value="">所有</option>
            <option th:each="dict : ${productTypes}" th:content="${dict.actAmt}" th:selected="*{proctypeId}==${dict.id}" th:text="${dict.typeName}" th:value="${dict.id}"></option>
        </select>
    </div>
</div>
<div class="form-group" hidden>
    <label class="col-sm-3 control-label">机器类型:</label>
    <div class="col-sm-8">
        <input name="proctypeId" id="proctypeId" class="form-control" type="text">
    </div>
</div>

<script th:inline="javascript">
    var prefix = ctx + "product/product";
    $("#form-type-edit").validate({
        focusCleanup: true
    });
	
	// 获取选中的select,并获取content的值,然后赋值给input框
    $("#type").change(function () {
        var actAmt = $(this).find("option:selected").attr("content");
        $("input[name='actAmt']").val(actAmt);
    });

    function submitHandler() {
        if ($.validate.form()) {
            $("#proctypeId").val($("#type").val());
            $("#templateNo").val($("#rateTemp").val());
            $.operate.save(prefix + "/procTypeChangeSure", $('#form-type-edit').serialize());
        }
    }
</script>



版权声明:本文为weixin_46969401原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。