Question

我有一个允许用户创建自定义问题的表单。

用户需要插入问题的标题，然后选择问题的类型。

如果问题的类型是单选按钮，复选框或选择菜单，它应该显示为div＆＃34; availableOptions＆＃34;默认情况下显示两个输入文本，以便用户可以插入一些选项值。

的疑问：

当这个＆＃34; availableOptions＆＃34; div出现还有一个按钮＆＃34;添加新选项＆＃34;单击时，它应显示另一个输入文本，以便用户可以插入新的选项值。每个选项也应该始终有一个关联的删除按钮，当单击时，用户可以删除该输入文本，但它应始终至少为一个输入文本。

你知道如何正确地做到这一点吗？我有下面的工作示例，但它既没有附加也没有删除。

示例：https://jsfiddle.net/udx6pp8u/15/

HTML：

  <form id="" method="post" class="clearfix" action="">

  <div class="form-group">
    <label for="inputName">Title</label>
    <input type="text" class="form-control" id="inputName">
  </div>

  <div class="form-group">
    <label for="exampleFormControlSelect1">Type of Field</label>
    <select class="form-control" id="customQuestionType">
      <option>Text</option>
      <option>Long text</option>
      <option id="optionQuestion">Checkboxes</option>
      <option id="optionQuestion">Radiobuttons</option>
      <option id="optionQuestion">Select Menu </option>
    </select>
  </div>

  <div class="form-group" id="availableOptions">
    <label for="inputName">Available Options </label>
    <div class="option">
      <input type="text" class="form-control">
      <button id="removeOption">Remove Option</button>
    </div>
    <div class="option">
      <input type="text" class="form-control">
      <button id="removeOption">Remove Option</button>
    </div>

    <div class="form-group">
      <button type="button" class="btn btn-outline-primary mt-3" id="addNewOption">Add new Option</button>
    </div>
  </div>

  <input type="submit" class="btn btn-primary float-right mt-3" value="Store"/>

</form>

CSS：

#availableOptions{display:none;}

jQuery的：

var selected_option = $('#customQuestionType option:selected').attr('id');

if (selected_option == "optionQuestion") {
    $('#availableOptions').show();
    if ($('#addNewOption').click(function() {
            $('#availableOptions')
                .append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
        }));
    if ($('#removeOption').click(function() {
            $('#availableOptions') // how to remove the clicked otpion?
        }));

}

Answer 1

试试这个：

注意：不要使用id。请改用类。一个文档应该只有一个唯一ID。使用多个id =“removeOption”会导致您的脚本行为不正确，并选择第一个找到并忽略其余具有相同ID的

$('#customQuestionType').change(function(){
  var selected_option = $('option:selected', this).val();

  if (selected_option == "optionQuestion") {
    $('#availableOptions').show();
    $('#addNewOption').click(function() {
    $('#availableOptions').append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
    });
  }
});

$(document).on('click', '.removeOption', function(e) {
  e.preventDefault();
  $(this).closest('.option').remove();
})

样本：

https://jsfiddle.net/dL7opvak/21/

EDITED

点击按钮

1 个答案: