Semantic-UI 通過呈現的 HTML 中的選定屬性在下拉列表中預加載數據

Question

我的下拉數據包含重復數據，我還需要在加載時預先選擇數據。 由於具有相同值的重復選項，使用 Semantic-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>

將其與 Semanticui 綁定時

//for example 
$('#P861').dropdown();

下拉綁定選擇No而不是Insufficient information ，因為這是具有相同值的最后一個選項 - 1 ，這在我的用例中是不正確的。

幾乎所有下拉菜單都使用 id 或唯一值作為選項值。 但是在我當前的系統中，這些下拉列表是由用戶根據 excel 文件中的 VLOOKUP 表中的數據預先定義的（從 excel 到 MVC 的系統轉換），因此在這種情況下這些值可能是重復的。

我沒有在網上或堆棧溢出的任何地方找到任何答案，因為這是一個非常獨特的情況，因此決定自己解決這個問題。

下面回答。

Answer 1

我實現了一個單獨的條件，它通過搜索所選項目的文本而不是值來覆蓋在語義 UI 生成的 DIV.Menu 中查找所選項目。 此更改直接在 semantic.js 文件（本地副本）中進行。

請注意 - 此更改位於框架 JS 文件中，除非他們確定不會升級 Semantic UI Framework 文件，否則我不會向任何人推薦此更改，因為這些更改將丟失。

代碼更改

在 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.
    }

希望這可以幫助任何尋求類似修復的人，因為這是一個非常具有挑戰性的實現，因為我必須調試下拉列表的整個綁定過程才能找到它。