使用ajax和php从数据库将数据检索到html下拉列表时出现问题？

debugcn 发表于 Dev

开关

我正在从数据库中检索数据作为选项进入下拉菜单，并且我有一个添加按钮，它将在此处添加下拉菜单。我从数据库中获取选项，所以有两个选项，所以我添加的每个下拉菜单都应该有两个选项，这里的问题是

第一次，第一个下拉菜单有两个下拉菜单，当我添加另一个下拉菜单并再次访问时，第一个下拉菜单显示了四个选项，这两个选项被翻倍，就像我添加第三个下拉菜单时，它显示了每个选项3次，即9选项，但我想每次都显示2个选项，只有代码在这里
我一直禁用添加fa-fa-icon的功能，但无法正常工作，即如果我选择了任何选项，则只有fa-fa-icon才应启用，我为此编写了代码，但无法正常工作

   //Select option function
$(document).on("change", ".drop", function() {

 

  //Enable button on selection
  $('#seedoc').prop('disabled', false)


})


//response
var res = {
  "users": ["<p style='margin:0px;display:none;'data-id='755'>amilham</p>",
    "<p style='margin:0px;display:none;'data-id='706'>a_sarabi</p>"
  ]
}


function getEmails() {
  res.users.forEach(function(option) {
    $('.drop').append('<option data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
  });
}

function addOne() {

  $('#container').append("<div class='form-group' style='display:flex'><select class='drop form-control' name='option' id='option'> <option value='' disabled selected>Select your option</option> </select>");
  getEmails();

}
getEmails();

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type='text/css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class=""></div>
<i class="fa fa-plus-square fa-2x" aria-hidden="true" id="seedoc" style="float: right; margin-right: 10px;" onclick="addOne();" disabled></i>

<div class='form-group' style='display:flex'>
  <select class='drop form-control' name='option' id='option'>
    <option value='' disabled selected>Select your option</option>

  </select>
  <button class="btn btn-primary shrBtn" style="float:left;" onclick="send()">Send</button>

</div>

请任何人先帮助我！

卡罗尔·帕拉克（Karol Pawlak）

<option>每次从数据库加载新项目时，都将附加标签。只需先清理下拉列表，或用新的替换现有的下拉列表：

function getEmails() {
  $('.drop').html('');
  res.users.forEach(function(option) {
    $('.drop').append('<option data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
  });
}

要么

function getEmails() {
  let options = '';
  res.users.forEach(function(option) {
    options += '<option data-id=' + $(option).attr('data-id') + '>' + option + '</option>';
  });
  $('.drop').html(options);
}

我不确定是否可以禁用图标。如果您不想使用按钮来包装它，只需在事件监听器中添加条件即可。首先，代替“ disabled”设置data-enabled="0"并删除disabled属性和"onclick=addOne()"调用：

<i class="fa fa-plus-square fa-2x" aria-hidden="true" id="seedoc" style="float: right; margin-right: 10px;" data-enabled="0"></i>

然后，为图标单击注册操作并在其中添加条件：

$(document).on("change", ".drop", function() {

  $('#seedoc').data().enabled = 1; //set data-enabled to true instead of disabled = false

});

$(document).on("click", "#seedoc", function(e) {

  if ($(this).data().enabled) addOne();

});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。