当表单控件选项具有多个参数时，如何在组合框中填充所选项目

How to populate the selected item in combobox when form control option having multiple parameters?

本文关键字：选项 组合 填充 项目 控件 表单 参数      更新时间：2023-10-04

我正在尝试将保存的所选项目填充到表单控件中。

<select class="form-control">
    <option data-parameter-id="685" data-parent-id="1052" data-aggregation-id="null" data-aggregation-parameter="null">ABC</option>
    <option data-parameter-id="993" data-parent-id="0" data-aggregation-id="43" data-aggregation-parameter="2">DEF</option>
    <option data-parameter-id="993" data-parent-id="0" data-aggregation-id="39" data-aggregation-parameter="null">XYZ</option>
<select>

当我获得外部输入值时（例如：选择具有数据聚合id＝39的第三行），必须从选项中选择相应的值。我有写为的代码

var savedOrderedAttributeId = $('#ordered-attribute-id').val();
var savedOrderedAttributeAggregationId = $('#ordered-aggregation-id').val();
var selectorForOptionWithSavedParameter = '"select"'+ ' option[data-aggregation-id="' + savedOrderedAttributeAggregationId + '"' + 'data-parameter-id="' + savedOrderedAttributeId + '"]';
$(controlSelector).find("select").val($(controlSelector).find(selectorForOptionWithSavedParameter).val());

必须对代码进行哪些更改才能根据这两个参数选择选项？

首先，您必须循环选择选项，并检查哪个选项与您要查找的数据聚合id匹配。例如

var savedOrderedAttributeId = $('#ordered-attribute-id').val();
var savedOrderedAttributeAggregationId = $('#ordered-aggregation-id').val();
    
$('select option').each(function(o) {
  
  if($(this).data('aggregation-id') == savedOrderedAttributeAggregationId && 
     $(this).data('parameter-id') == savedOrderedAttributeId) {
    //alert('found it');
    $(this).attr('selected', 'selected');
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
    <option data-parameter-id="685" data-parent-id="1052" data-aggregation-id="null" data-aggregation-parameter="null">ABC</option>
    <option data-parameter-id="993" data-parent-id="0" data-aggregation-id="43" data-aggregation-parameter="2">DEF</option>
    <option data-parameter-id="993" data-parent-id="0" data-aggregation-id="39" data-aggregation-parameter="null">XYZ</option>
<select>

相关文章：