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/

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

Answer 1

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

在$('#select').empty();循环之前添加for并在其中运行$('#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表单验证

1 个答案: