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);
});
Related
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.
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.
So I need to call the value of a select dropdown list where I've named the select list as a wild card value (It's a wild card value because there are multiple dropdown lists I make for every iteration of User with a specific property.
= select_tag "#{user.id}", options_for_select([["User", "0"], ["Admin", "1"]]),
:onchange => "setTimeout('admin_change(#{user.id});', 300);
So, then in a javascript block at the top I have this
function admin_change(id) {
change_value = $(#id).val();
Following this I execute a different $.AJAX command based on the change_value pulled.
Is there a way for me to execute this?
Give to all selects you need to manipulate a class, then:
$('document').ready(function(){
$('.myselects').change(function(){
var user_id = $(this).val();
/*
if value is not your user id, just add it to options as data-* attribute
(ex: data-user-id="123"), and select it using:
*/
var user_id = $(this).find('option:selected').attr('data-user-id');
// and, at this point, do anything you need: ajax calls, etc...
});
});
I have a select box pull down that I'm populating with a JSON list returned from a stored procedure, but unfortunately when I update the linked object I need to return the selected text of the pulldown, not the selected index like one would think (poor database design, but I'm stuck with it for now and cannot change it).
Does anyone have any ideas what I can do to keep the selected text synced with the appropriate javascript object's attribute?
You could keep both, the value and the text, if you use subscribers.
For instance, if each of your javascript objects look like this:
var optionObject = {
text:"text1"
value: 1
}
Then your binding would look like:
Where 'OptionsObjects' is a collection of optionObject and selectedOption
has two observable properties: text and value.
Finally you subscribe to the value property of the selectedOption:
viewModel.selectedOption.value.subscribe(function(newValue){
var optionText = viewModel.OptionsObjects[newValue].text;
viewModel.selectedOption.text(optionText);
});
Then if you want to see the new selected option text when the value is changed,
you could have a binding as follows:
<span data-bind:"text:selectedOption.text"></span>
In your particular case you would return selectedOption.text().
So yes, you got what I was getting at. Use the text as the value for the select options rather than using an index. The value really should be something useful, I can't think of any case where I've ever used an index. A number sure, but a number that relates to the application's models in some way (like an id from a database), not to the number of items in the select box.
Well done.
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