動態下拉語義UI表單驗證

Question

我正在構建一個動態表單，需要重建和驗證下拉列表。我發現我可以使用「設置菜單」選項重建下拉列表，但是當我重新初始化表單驗證時，即使選擇了一個值，也會拋出一個空的錯誤。

HTML

<form class="ui form"> 
    <div class="required field"> 
    <label for="gender">Dynamic Dropdown</label> 
    <select name="dropdown" class="ui dropdown" id="select"> 
     <option value="">Gender</option> 
     <option value="male">Male</option> 
     <option value="female">Female</option> 
    </select> 
    </div> 
    <div class="ui divider"></div> 
    <div class="ui submit button">Submit</div> 
</form> 

的JavaScript

function form_init() { 
    $(".ui.form").form({ 
    inline: true, 
    on: 'submit', 
    fields: { 
     dropdown: { 
      identifier : 'dropdown', 
      rules: [ 
      { 
       type : 'empty', 
       prompt : 'Please enter a value' 
      } 
      ] 
     } 
    } 
    }); 

    $(".ui.form").find(".ui.dropdown").dropdown(); 
} 

arr = [ 
    {id: 1, name: "Bob"}, 
    {id: 2, name: "Barb"} 
]; 
options = []; 

for (var i = 0; i < arr.length; i++) { 
    options.push({ 
    value: arr[i].id, 
    text: arr[i].name, 
    name: arr[i].name 
    }) 
} 

$("#select").dropdown('setup menu', {values: options}); 

form_init(); 

我建立了一個的jsfiddle這裏https://jsfiddle.net/booshwa/mjuL6tvL/2/

任何幫助非常感謝，不知道這是bug還是我我錯過了什麼。

Answer 1

您還需要編輯select元素的內容以匹配您的新數據。 $("#select").dropdown('setup menu', {values: options});僅替換Semantic爲UI用途添加的「僞」數據。

在您的for循環之前添加$('#select').empty();並在其中運行$('#select').append($('<option>', {value:arr[i].id, text:arr[i].name}));可以整理您的問題。

在下面的示例中，我還添加了一個空值字段，以便您可以看到它的工作原理。

https://jsfiddle.net/mjuL6tvL/4/