Question

我有一个用数组（称为＆＃34; operaciones＆＃34;）呈现的ejs模板，是sql请求的结果。

我需要实现当用户选择一个寄存器（＆＃34; unidad de obra＆＃34;）时，其他输入显示字段＆＃34; unidad de medida＆＃34;和＆＃34; precio unitario＆＃34;。

这是我的代码：

<div class="col-md-6">
    <label for="via">Unidad de obra:</label>
    <select class="form-control" id="operacion" name="operacion" value="<%= medicion.idope %>" id="medicion">
    <% for(var i=0; i < operaciones.length; i++) { %>
        <option value=<%= operaciones[i].gid %>><%= operaciones[i].codigo %>-<%= operaciones[i].descr %></option>
    <% }%>
   </select>
</div>
<div class="col-md-3">
   <label>Unidad de medida:</label>
   <input type="text" class="form-control" id="unidad" name="unidad" value="" disabled/>
</div>
<div class="col-md-3">
   <label>Precio unitario (€):</label>
   <input type="text" class="form-control" id="preciou" name="preciou" value="" disabled/>
</div>

先谢谢。

Answer 1

您可以将这些值输出到选项的 data 属性中。然后添加一些jquery来处理选择并更新值。（我用对象文字替换了ejs，使其在一个代码片段中工作）：

＆＃13;

//serverside

var operaciones = [
{gid:1,codigo:2,descr:2,unidad:3,preciou:4},
{gid:5,codigo:6,descr:2,unidad:7,preciou:8},

];

var c = `
<div class="col-md-6">
    <label for="via">Unidad de obra:</label>
    <select class="form-control" id="operacion" name="operacion">`; 
    
    for(var i=0; i < operaciones.length; i++) {
      c+=`
       <option 
         value="${ operaciones[i].gid}"
         data-unidad="${ operaciones[i].unidad}"
         data-preciou="${ operaciones[i].preciou}"
         
       >
          ${operaciones[i].codigo}-${ operaciones[i].descr}
       </option>`;
    }

c += `
   </select>
</div>
<div class="col-md-3">
   <label>Unidad de medida:</label>
   <input type="text" class="form-control" id="unidad" name="unidad" value="1" disabled/>
</div>
<div class="col-md-3">
   <label>Precio unitario (€):</label>
   <input type="text" class="form-control" id="preciou" name="preciou" value="2" disabled/>
</div>`;

document.body.innerHTML = c;

//userside

$(function(){
$("#operacion").on("change",function(){
  
  var selected = $(this).children("option:selected");
  $("#unidad").val(selected.data("unidad"));
  $("#preciou").val(selected.data("preciou"));
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

在ejs模板中同步输入元素

1 个答案: