Jquery 语义UI通过呈现HTML中的选定属性在下拉列表中预加载数据

我的下拉列表数据包含重复项，我还需要预先选择加载的数据。由于具有相同值的重复选项，使用语义UI的下拉列表的默认绑定失败

下面是我的数据的外观

<select id="P861" data-cell="P861" class="ui search selection dropdown">
  <option value="">Select an option</option>
  <option value="1" selected="selected">Insufficient information</option>
  <option value="1">Not applicable</option>
  <option value="1">No</option>
  <option value="3">Partially</option>
  <option value="4">Yes</option>
  <option value="4">Not Applicable</option>
</select>

下拉绑定选择No而不是信息不足，因为这是具有相同值的最后一个选项-1，这在我的用例中是不正确的

几乎所有下拉列表都使用ID或唯一值作为选项值。但在我目前的系统中，这些下拉列表是由用户根据excel文件中VLOOKUP表中的数据预先定义的（从excel到MVC的系统转换），因此在这种情况下，这些值可以重复

由于这是一个非常独特的情况，我在网络或堆栈溢出的任何地方都没有找到任何答案，因此决定自己解决这个问题

---

回答如下。

我实现了一个单独的条件，通过搜索所选项目的文本而不是值，该条件覆盖在由语义ui生成的DIV.菜单中查找所选项目。此更改直接在semantic.js文件（本地副本）中进行

请注意-此更改位于框架JS文件中，我不会向任何人推荐此更改，除非他们确定不会升级语义UI框架文件，因为这些更改将丢失

代码更改

在fomanticUI-semantic.js版本2.8.6的第8660行，我添加了以下内容：

if (shouldSearch) {
    //Custom code for selecting based on selected attribute of rendered option instead of value

    //Find the selected option inside $module, $module is the select tag by default.
    var selByText = $module.find('option[selected="selected"]');

    //If the option with selected attribute exists
    if (selByText !== undefined && selByText.length > 0) {
      //$item at this method will be the array of items inside the DIV.Menu 
      //and From the parent level - DIV.Menu, find the option that contains the data-text as the 
      //selected text above.
      $selectedItem = $item.parent().find('div.item[data-text="' + selByText[0].outerText + '"]');
    }
    else {
        //existing code *$item.each(function (){ code... });* within **if(shouldSearch)**
        //this allows that if your dropdown data doesn't have 
        //any selected="selected" attribute, then the default code will run.
    }

希望这能帮助任何寻找类似修复的人，因为这是一个非常具有挑战性的实现，因为我必须调试下拉列表的整个绑定过程才能找到答案

if (shouldSearch) {
    //Custom code for selecting based on selected attribute of rendered option instead of value

    //Find the selected option inside $module, $module is the select tag by default.
    var selByText = $module.find('option[selected="selected"]');

    //If the option with selected attribute exists
    if (selByText !== undefined && selByText.length > 0) {
      //$item at this method will be the array of items inside the DIV.Menu 
      //and From the parent level - DIV.Menu, find the option that contains the data-text as the 
      //selected text above.
      $selectedItem = $item.parent().find('div.item[data-text="' + selByText[0].outerText + '"]');
    }
    else {
        //existing code *$item.each(function (){ code... });* within **if(shouldSearch)**
        //this allows that if your dropdown data doesn't have 
        //any selected="selected" attribute, then the default code will run.
    }