We Keep Coding

Populating the data from ajax response into an dropdown

Hi I am new to jquery and ajax I had a dropdown where I will get the data from database using ajax but I am getting issue while populating that data into an dropdown here is the fiddle here I had taken the response in an variable and populated
//Store in array()
$(document).ready(function () {
addOne();
$('.drop').select2();
});
var uids = [];
//Select option function
$(document).on("change", ".drop", function() {
$('#seedoc').data().enabled = 1; //set data-enabled to true instead of disabled = false
//Find option selected
var data = $(this).find("option:selected").attr('data-id')
//Push selected data-id
uids.push(data)
//Enable button on selection
$('#seedoc').prop('disabled', false)
$('#seedoc').css('color', 'green');
})
$(document).on("click", "#seedoc", function(e) {
const count = $('.drop').length;
let sum = 0;
$('.drop').each(function(e, elem) {
sum += (parseInt($(elem).val()) > 0);
});
if (sum == count) addOne();
});
//Send
function send() {
console.log(uids)
}
//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 value="' + $(option).attr('data-id') + '"" data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
});
}
function addOne() {
$('#seedoc').css('color', 'gray');
$('#email-list-container').append("<div class='form-group' style='display:flex'><select class='drop form-control' name='option' id='option'> <option value='0' disabled selected>Select your option</option> </select><select class='form-control' style='margin-left:1rem' name='cars' id='permissions'><option value='1'>edit</option><option value='2'>view only</option></select>");
getEmails();
}
getEmails();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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/select2/3.3.1/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.3.1/select2.min.css" type='text/css' rel='stylesheet' />
<div id="email-list-container" class=""></div>
<i class="fa fa-plus-square fa-2x" aria-hidden="true" id="seedoc" style="float: right; margin-right: 10px;" data-enabled="0"></i>
Here the problem is I am getting the same data for every dropdown on click of add button but here in the firstdropdown I am getting two names and when I click add and check the first dropdown again I am getting
the two names doubled i.e 4 options but I want to show only two options in every dropdown whenever I check
Please help me

Try to change this line:
$('.drop').append('<option value="' + $(option).attr('data-id') + '"" data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
});
To this line, which will ensure that only the last dropdown gets the options added to it:
$('.drop').last().append('<option value="' + $(option).attr('data-id') + '"" data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
});

You can simply use .last function in your getEmails - append function to make sure that you are not appending to the new option to every drop down as you have same classes .drop.
This will ensure you are not appending the option to all the dropdowns but only the last one.
Demo
//Store in array()
$(document).ready(function() {
addOne();
});
var uids = [];
//Select option function
$(document).on("change", ".drop", function() {
$('#seedoc').data().enabled = 1; //set data-enabled to true instead of disabled = false
//Find option selected
var data = $(this).find("option:selected").attr('data-id')
//Push selected data-id
uids.push(data)
//Enable button on selection
$('#seedoc').prop('disabled', false)
$('#seedoc').css('color', 'green');
})
$(document).on("click", "#seedoc", function(e) {
const count = $('.drop').length;
let sum = 0;
$('.drop').each(function(e, elem) {
sum += (parseInt($(elem).val()) > 0);
});
if (sum == count) addOne();
});
//Send
function send() {
console.log(uids)
}
//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').last().append('<option value="' + $(option).attr('data-id') + '"" data-id=' + $(option).attr('data-id') + '>' + option + '</option>');
});
}
function addOne() {
$('#seedoc').css('color', 'gray');
$('#email-list-container').append("<div class='form-group' style='display:flex'><select class='drop form-control' name='option' id='option'> <option value='0' disabled selected>Select your option</option> </select><select class='form-control' style='margin-left:1rem' name='cars' id='permissions'><option value='1'>edit</option><option value='2'>view only</option></select>");
getEmails();
}
getEmails();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type='text/css' rel='stylesheet' />
<div id="email-list-container" class=""></div>
<i class="fa fa-plus-square fa-2x" aria-hidden="true" id="seedoc" style="float: right; margin-right: 10px;" data-enabled="0"></i>

How to get data from dynamic elements that added to the html page?

In below I write form part of my html page.
<form method="post" enctype="multipart/form-data">
<div>
<label>Brand Name:</label>
<input type="text" asp-for="#Model.Name">
</div>
<div id="divCategory">
</div>
<button type="button" id="btnAddCategory">Add Category</button>
<button>Create new Brand</button>
</form>
and I have two js and jquery function that add a select to divCategory. Whith this select I can add some categories.
function countMyCategories() {
if (typeof countMyCategories.counter == 'undefined') {
countMyCategories.counter = -1;
}
return ++countMyCategories.counter;
}
$(document).ready(function () {
$('#btnAddCategory').on('click', function () {
var catId = countMyCategories();
$('#divCategory').append(
'<select id="selectCategory' + catId + '" asp
for="##Model.CatBrands[' + catId + '].CatId" class="mt-3 form-control
form-control-sm">' +
'<option>---Select---</option>' +
'</select>'
);
$.ajax('/API/GetCats')
.done(function (categories) {
for (var i = 0; i < categories.length; i++) {
$('#selectCategory' + catId).append(
'<option value="' + categories[i].id + '">' +
categories[i].name + '</option>'
)
}
});
});
});
When I click the "Add Category" button one select tag added to the div by id="divCategory", but problem is that when I click "Create New Brand" button, I don't get data from these selects in server, actually CatBrands is null but I got name. I get something like that:
{name = "LG", catBrands = null}

CatBrands is null because you can't dynamically add data from the server in this manner. When the page renders, you need everything you want rendered by asp in the html.
<form method="post" enctype="multipart/form-data">
<div>
<label>Brand Name:</label>
<input type="text" asp-for="#Model.Name">
</div>
<div id="divCategory">
<select id="selectCategory asp-code-goes-here>
<option>---Select---</option>
</select>
</div>
<button type="button" id="btnAddCategory">Add Category</button>
<button>Create new Brand</button>
</form>

I've made a terible mistake. I should change my function like this
$(document).ready(function () {
$('#btnAddCategory').on('click', function () {
var catId = countMyCategories();
$('#divCategory').append(
'<select id="selectCategory' + catId + '"
name = "CatBrands[' + catId + '].CatId" class="mt-3 form-control
form-control-sm">' +
'<option>---Select---</option>' +
'</select>'
);
$.ajax('/API/GetCats')
.done(function (categories) {
for (var i = 0; i < categories.length; i++) {
$('#selectCategory' + catId).append(
'<option value="' + categories[i].id + '">' +
categories[i].name + '</option>'
)
}
});
});
});

Where to place my code to select first option of <select> with jQuery?

I need to select first option of select with jQuery. My code is a bit complex and can't figure out how to make it work. Thanks
Html:
'sortingHtml': '<select id="bc-sf-filter-top-sorting-select">{{sortingItems}}</select>'
Javascript:
BCSfFilter.prototype.buildFilterSorting = function() {
if (bcSfFilterTemplate.hasOwnProperty('sortingHtml')) {
jQ(this.selector.topSorting).html('');
var sortingArr = this.getSortingList();
if (sortingArr) {
// Build content
var sortingItemsHtml = '';
for (var k in sortingArr) {
sortingItemsHtml += '<option value="' + k +'">' + sortingArr[k] + '</option>';
}
sortingItemsHtml = '<option disabled="disabled" selected>Sort by</option>' + sortingItemsHtml
var html = bcSfFilterTemplate.sortingHtml.replace(/{{sortingItems}}/g, sortingItemsHtml);
jQ(this.selector.topSorting).html(html);
// Set current value
jQ(this.selector.topSorting + ' select').val(this.queryParams.sort);
}
}
};
Code to select the first option:
$("#bc-sf-filter-top-sorting-select").val($("#bc-sf-filter-top-sorting-select option:first").val());

$("#bc-sf-filter-top-sorting-select option:first").prop("selected", true);

matching text of option tag using filter function

I have two select box. on change event of first select box, i'm adding that text into second select box. but i don't want to add duplicate record.for this i'm using filter function,(if any text that has already added then i don't want to add again) but it's not working as i want.
html
<select id="ddlCategory">
<option value="0">Select Category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
<select multiple="multiple" id="my-select" name="my-select[]" class="multiDrop"> </select>
<select multiple="multiple" id="your-select" name="my-selectyour[]" class="multiDrop">
myJs:
$('#my-select').change(function () {
var getValue = $(this).find('option:selected').val();
var getText = $(this).find('option:selected').text();
var getCategory = $('#ddlCategory').find('option:selected').text();
if ($('#your-select > option').hasClass(getCategory)) {
$("#your-select > option").filter(function (index) {
if ($(this).html() == getText) {
return;
}
$('#your-select').append('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
});
} else {
$('#your-select').html('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
}
});
Jsfiddle

Here you go... my edited fiddle: http://jsfiddle.net/stoz1m6v/2/
This way it does not duplicate the entries in myselect...
you had some checking of class/category there which I removed, because I found it incorrectly done, however I could not comprehend how exactly you wanted to check the category...
and the script goes like this... I have changed only the change handler of the my-select:
$('#my-select').change(function () {
var getValue = $(this).find('option:selected').val();
var getText = $(this).find('option:selected').text();
var getCategory = $('#ddlCategory').find('option:selected').text();
if ($("#your-select > option").filter(function (index) {
return $(this).html() == getText; }).length ==0) {
$('#your-select').append('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
}
});

How to Add Handler Id to Options value loaded by jQuery

I am trying to load a select options by using jQuery from 3 arrays to one select list on click which so far works fine for me at here
But I have an issue here.if you look at the values I have same value on three list so I have to upgrade them by adding also the id of the clicked button to the value some thing like this:
<option value="regi1NNN">NNN</option>
instead of
<option value="NNN">NNN</option>
depends on what button clicked.
Here is my code:
$(document).ready(function () {
var opt1 = ["AAAA", "BBBB", "NNN", "JJJJJ"];
var opt2 = ["KKKK", "FFFF", "NNN", "TTTTT"];
var opt3 = ["MMM", "NNN", "OOOO", "PPPPP"];
$("#regi1").click(function () {
$('#items option').remove();
var option = '';
for (i = 0; i < opt1.length; i++) {
option += '<option value="' + opt1[i] + '">' + opt1[i] + '</option>';
}
$('#items').append(option);
});
$("#regi2").click(function () {
$('#items option').remove();
var option = '';
for (i = 0; i < opt2.length; i++) {
option += '<option value="' + opt2[i] + '">' + opt2[i] + '</option>';
}
$('#items').append(option);
});
$("#regi3").click(function () {
$('#items option').remove();
var option = '';
for (i = 0; i < opt3.length; i++) {
option += '<option value="' + opt3[i] + '">' + opt3[i] + '</option>';
}
$('#items').append(option);
});
});

When you create your options like so:
option += '<option value="' + opt1[i] + '">' + opt1[i] + '</option>';
Simply add the id of the clicked element as a prefix:
option += '<option value="' + this.id + opt1[i] + '">' + opt1[i] + '</option>';
Working example: http://jsfiddle.net/g8euy/ This way when you combine all your click handlers into one function (which you should, since you have three functions that do the same thing) you'll be all set.
UPDATE: I rewrote your code to only use a single funciton. Example here: http://jsfiddle.net/n2tBC/1/
I added a class and a data attribute to your buttons:
<div class="container">
<div class="well">
<div class="btn-group">
<button type="button" class="btn btn-default listy" id="regi1" data-vals="opt1">Left</button>
<button type="button" class="btn btn-default listy" id="regi2" data-vals="opt2">Middle</button>
<button type="button" class="btn btn-default listy" id="regi3" data-vals="opt3">Right</button>
</div>
<br />
<br />
<select id="items"></select>
</div>
</div>
And then the script combines your value lists into an object, and there's a single function that gets the data based on the data-val of the clicked button:
$(document).ready(function () {
var myVals = {
opt1: ["AAAA", "BBBB", "NNN", "JJJJJ"],
opt2: ["KKKK", "FFFF", "NNN", "TTTTT"],
opt3: ["MMM", "NNN", "OOOO", "PPPPP"]
}
$(".listy").click(function () {
$('#items option').remove();
var clickedButton = $(this);
var valueList = myVals[clickedButton.data('vals')];
var option = '';
for (i = 0; i < valueList.length; i++) {
option += '<option value="' + this.id + valueList[i] + '">' + valueList[i] + '</option>';
}
$('#items').append(option);
});
});
Now when you add more buttons, you don't add more code.