javascript - 需要在for循环中隐藏html输入

Question

我正在使用 swig/twig 在 select 语句内创建一个循环。我这样做是因为我需要一个变量的值，正如您将看到的。我有它，所以值都很好，但是当我加载页面时，它显示除了选择之外的循环中的顶部选项之外的所有选项。就像它的正下方一样。这是我的循环:

<select class="form-control selectpicker" title="Asset" name="asset" data-live-search="true">
 {%  for asset in assets  %}
  <option value="{{ asset.assetNumber }}">{{ asset.model }} | {{ asset.assetNumber }}</option>
  <input type="hidden" name="assetID" value="{{asset.id}}">
 {% endfor %}
</select>

我可以在数组中拥有无限的东西，但仍然只有 1 会出现在选择器中。这会导致它，所以我无法使用选择器来满足我的需要，并且会破坏整个页面，因为它是基于该值的。

我也尝试过<button value="{{asset.id}}"></button>但当我注销后路由中的变量时，它不会显示在控制台中。如何让它显示在发布路由中但不影响我的选择器？

<select class="form-control selectpicker" title="Asset" name="assignSel" data-
 live-search="true">
 {%  for assign in assigns  %}
   <option name="assign" value="{{ assign.id }}">{{ assign.subuser }} | {{ 
  assign.asset.num }}</option>
  <input type="hidden" name="outdate" value="{{ assign.checkoutDate }}"/>
 {% endfor %}
</select>

Answer 1

正如评论中建议的那样，使用数据属性，但您仍然需要一些 JavaScript 来将数据值分配给您的表单

javascript

$('select[name="asset"]').on('change', function() {
    $('input[name="assetID"]').val($('option:selected', this).data('asset-id'));
    console.log($('input[name="assetID"]').val());
});

Twig

<select class="form-control selectpicker" title="Asset" name="asset" data-live-search="true">
{% for asset in assets %}
     <option value="{{ asset.assetNumber }}" data-asset-id="{{ asset.id }}">{{ asset.model }} | {{ asset.assetNumber }}</option>
{% endfor %}
</select>
<input type="hidden" name="assetID" value="">