JQuery: Append to listbox - setting JSON data as value - javascript

I'm trying to append all the selected items from listbox 1 to listbox 2, and it's working fine. The problem is that I want to set the item values of the listitems on listbox 2 to an ID i get from JSON.
I have the ID from JSON, but I'm not sure how to set the values when I use appendTo.
Here's the code I'm using now, when the values is set to "0":
$('#ListBox1 option:selected').appendTo('#ListBox2');
I think I have to do something like this:
var numberOfSelectedItems = $('#ListBox1 option:selected').length;
for(int i = 0; i < numberOfSelectedItems; i++)
{
var ID = data.array[i].ID; //This is the ID value from JSON.
//TODO: Set the ID as value on each selected item
}
Please help =)

You should be able to set use the .attr() jQuery function to set the id on each item, perhaps combined with using Javascript's helpful array functions to the next ID in the list.
Something like...
$('#ListBox1 option:selected')
.attr('id', data.array.shift())
.appendTo('#ListBox2');
JQuery allows you to chain together successive operations on a given selection, so you can set the id attribute on each before appending it to your second list.
data.array.shift just removes and returns the first item in the array, so each time this is called (for each list item) you'll get the next id assigned to the list item being processed.
Of course, if you need use data.array afterwards you may need to copy it first.

Related

Targeting one specific value based off index

I'm using jQuery to populate a standard HTML select list from a JSON file. The populate function works fine, but now I need to target a specific value of whatever dropdown is selected to get a value. The .0xx AFM is what goes in the dropdown box, the value is the value that's assigned to the select element, and the price is the price associated with that dropdown. What I'm trying to achieve is use jQuery or JS to get the price associated with the selected dropdown. That way I can use the price value as a variable in a calculation formula.
You can find the price each time a value is selected from the list. I can't edit your code because it is a screenshot, but this would go INSIDE the get getJSON call but AFTER the each loop.
Something like:
// inside your getJson call, after your $.each loop
$(dropdown).on('change', function() {
const selectedValue = $(this).val();
const match = Object.values(data).find(entry => entry.value === selectedValue);
console.log(match && match.price);
});

Write var in Angular: See which array is selected

I have a json array. I can see the item in one select. When I click on one item, a new select is create with - if there are - subarray items.
HERE can see what I am talking about.
All works fine, but I am not able to display info about the selected item.
How can I do? Because in internet I've found that you can do it writing the ng-model of the selection. But if I write:
<span>{{select.id_1}}</span>
I see just the ID of the selected item.
Thank you in advice!!
ng-model will contain the value of the selected option. So you will have to manually work out / fetch the right object depending on the value. One way to do what you want would be to go through the list and match up the id, assign that to a variable and use that instead.
I've updated your plunkr code here.
Essentially, added:
$scope.selectedProduct = {};
$scope.selectedLot = {};
....
$scope.selectedProduct = $scope.list.products[i];
....
$scope.selectedLot = $scope.Subarray[i];
This picks the item from list and subarray and assigns them so you're holding the selected object.

if statement not working as it should

I have a webshop and with jquery i need to check when adding a product if it exists in cart, then it should increase quantity instead of creating a new row.
The code i use to check if it exists in cart is the following:
if ($(".store-purchase-list-quantity-plus").attr('part') != SalesNO)
If this is true, it should add a new row. If its false it should add quantity.
SalesNO is the product id.
This works only for the first product in cart, then it just keeps adding a new row. It seems to me the if statement only checks the first ".store-purchase-list-quantity-plus", even if there are multiple of them in the DOM.
How do i change my if statement so it checks all .store-purchase-list-quantity-plus" after (attr = salesNO)
It's working exactly as it should. That's just not how you expect it to work.
From the documentation:
The .attr() method gets the attribute value for only the first element in the matched set. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.
There are a number of looping constructs available in jQuery, though given your particular need - finding out if there's an element that has a specific attribute value in a set of matched elements - using .filter() is probably the best choice.
var partExists = $(".store-purchase-list-quantity-plus").filter(function() {
return $(this).attr('part') == SalesNO;
}).length > 0; // there's an element with a part attribute matching SalesNO
if(partExists) {
// increase quantity
}
else {
// add new entry
}
if there are more matches on the page with class store-purchase-list-quantity-plus, you will still only select the first with $(".store-purchase-list-quantity-plus").
Make a loop to check all.

ExtJS4 get a member of a store

How can I get the element id of an item in a store range on ExtJS4 based on a property of the item? For instance, I am getting the store as follows:
var combobox = Ext.ComponentQuery.query('[xtype=mycombobox]')[0];
var items = combobox.getStore().getRange();
I want to jump to the correct item in the combobox based on a productid that a user selects elsewhere:
combobox.select(elementid);
I am just missing the logic that lets me say
elementid = items.getWhere('prodid', 'productid'); // Or however its actually done.
This is what I ended up coming up with, which actually required two seperate calls. Not sure if this is the most efficient way to do it but it seems to work.
First, I need to get the model that has a productid that equals value:
var model = combobox.getStore().findRecord('productId', value);
Then, I need to figure out what the index of that model is in the overall store:
var index = combobox.getStore().indexOf(model);
Then I can take the index and apply it to back to the combobox:
combobox.select(index);

Populate an array to consist of all of the values in an html select list using jQuery

I have an HTML select list (let's call it List A) that is dynamically populated with a list of values. I need to change another select list (List B) depending on the value of List A. That part, I can do. Ordinarily, the user selects one element of List A, and gets a List B contingent on List A.
However, the first element of List A is "All Values." Therefore, in this instance, I want a List B that consists of the aggregate of all of the values possible for List B. Because the available values of List A are dynamically generated, I can't simply pull all List B values. I need to pull all List B values contingent on all List A values shown.
To do this, I want to iterate through all of the values in List A, and append to List B for each item in List A. This is where I'm stuck. How can I populate an array to consist of all of the values in a select list? Again, because List A is populated dynamically, the only way to get a list of these values is to pull them from the select list element.
I tried this:
iterate_models = $.map($('#listA'), function(e) { return $(e).val(); });
This did not give me an array of the values of each element in #listA. I can't figure out why not.
You need to map val() over all the <option> elements in your dropdown list:
iterate_models = $.map($("#listA option"), function(e) {
return $(e).val();
});
Your biggest problem here is that your selector will select the actual select element and get it's value. You want all the values of the option elements inside that select. Your selector should therefore be, #listA > option. You need to chain a .get() call on the $.map() call because the return value of $.map() is a jQuery-wrapped array, and you want a basic array, without the jQuery bells and whistles. Also, you can clean up your code by using the .map() variant because you are using map on a jQuery object.
Putting that all together:
var optVals = $("#listA > option").map(function() {
return this.value;
}).get();
$.each(optVals, function(i, val) {
alert(val);
});
jsFiddle

Categories

Resources