语义 UI 带有动态下拉列表的表单验证

Question

我正在构建一个需要重建和验证下拉列表的动态表单。我发现我可以使用 "setup menu" 选项重建下拉列表，但是当我重新初始化表单的验证时，它会抛出一个错误，即使选择了一个值也是空的。

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/

非常感谢任何帮助，不确定这是错误还是我遗漏了什么。

Answer 1

您还需要编辑 select 元素的内容以匹配您的新数据。 $("#select").dropdown('setup menu', {values: options}); 仅替换 Semantic 为 UI 目的添加的 "pseudo" 数据。

在 for 循环之前添加 $('#select').empty(); 并在其中添加运行 $('#select').append($('<option>', {value:arr[i].id, text:arr[i].name})); 可以解决您的问题。

在下面的示例中，我还添加了一个空值字段，因此您可以看到它有效。

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

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

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

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

  $('#select').append($('<option>', {
    value: arr[i].id,
    text: arr[i].name
  }));
}

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

form {
  margin: 2em;
}

<script src="//code.jquery.com/jquery-git.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" rel="stylesheet" />
<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>

语义 UI 带有动态下拉列表的表单验证

Semantic UI Form Validation with Dynamic Dropdowns

validation

jquery

semantic-ui