[英]Getting issue while retrieving data from database into html dropdown using ajax and php?
I am retrieving the data from database as options into my dropdown and I am having an add button which will add the dropdowns here I am getting options from database so there are two options so every dropdown which I add should have two options here the problem is我正在将数据库中的数据作为选项检索到我的下拉列表中,并且我有一个添加按钮,它将在此处添加下拉列表我从数据库中获取选项,因此有两个选项,因此我添加的每个下拉列表都应该有两个选项问题是
//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>
Please help me anyone thanks in advance!请帮助我的人提前谢谢!
You are appending the <option>
tags every time you load new items from database.每次从数据库加载新项目时,您都会附加
<option>
标记。 Simply clean dropdowns first, or replace the ones you already have with new ones:只需先清理下拉列表,或将已有的下拉列表替换为新的:
function getEmails() {
$('.drop').html('');
res.users.forEach(function(option) {
$('.drop').append('<option data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
});
}
OR或者
function getEmails() {
let options = '';
res.users.forEach(function(option) {
options += '<option data-id=' + $(option).attr('data-id') + '>' + option + '</option>';
});
$('.drop').html(options);
}
Im not sure if icon can be disabled.我不确定是否可以禁用图标。 If you dont want to wrap it with button, simply add condition in the event listener.
如果您不想用按钮包装它,只需在事件侦听器中添加条件即可。 First, instead of "disabled" set
data-enabled="0"
and removing disabled property and the "onclick=addOne()"
call:首先,不是“禁用”设置
data-enabled="0"
并删除禁用属性和"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>
Than, register action for icon click and add condition in it:然后,注册图标单击操作并在其中添加条件:
$(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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.