Selecting values from multiple select option box - Jquery - javascript

I am trying to select values in a multiple select option box. When i run my current code below, no item is selected in the option box but when i do parseInt(value) it only selects just the first option.
When i console.log(selected), it returns 4,5. How can insert 4,5 into $("#edit-items") to make it select both values in the option box.
PS: Sorry for my english
JS
var selected = $(this).attr('data-items'); returns 4,5
items = parseInt(selected)
$("#edit-items").val([items]);

parseInt() will only parse the first integer from 4,5. If you want to get all the intgers as an array, split the string and call parseInt() on each array element.
items = selected.split(',').map(str => parseInt(str));
$("#edit-items").val(items);

Related

To count the number of controls and print their Id into an alert box

To count the number of contols and print their Id into an alert box
I need help with my code
I am trying to count the number of contols in my webpage and display onto the alert box
Example
Textbox: 2
Buttons: 3
Radio buttons: 5
Drop down:3
Listbox: 1
I have used getElementsByTagName("INPUT") and getElementsByTagName("SELECT"). For the input fields I have no problem, but for the select I have to differentiate between for example drop down list or list box and more
i have tried this for listbox but it isnt working
var search_term = "lst"; // search term
var search = new RegExp(search_term, "i");
var arr = jQuery.grep(y, function (value) {
return search.test(value);
});
And secondly after using getElementsByTagName("INPUT") I filter again on type(text,checkbox,radio) I want to extract the Id and push it onto an array
You can use querySelectorAll method instead of getElementByTag name and use CSS selectors for selecting elements. for example Using
document.querySelectorAll('input[type="text"]')
selects all of inputs with type="text" and so on
You can get classes of a DOM element by classList method and id for getting ids
console.log(document.querySelectorAll('#foo')[0].id); // prints foo
and
console.log(document.querySelectorAll('#foo')[0].classList); // prints list of element possible classes

Angular multi-select dropdown and lodash countby

I am kinda drawing a blank on this one facet, and I can't seem to quite figure it out.
So I have a simple HTML select => option element which is populated from the back-end (not really relevant tho)
My question is this:
Let's say I have a pre-made object such as this:
{
keyName1: 450,
keyName2: 800,
keyName3: 300
}
What I want to do is to check if the key name matches a name of an option value in my multi-select dropdown (the values come from an array, using 'ng-repeat' on the option), and if the option value matches the key, add the number value to some sort of increment variable, so I can display the total number of 'keyNames' found.
For example - if a user selects 'keyName1' the incrementer value will total 450. If a user selects 'keyName1' and 'keyName2' the incrementer value will total 1,250.
I am lost on how to accomplish this - right now it is reading only the very first item in the dropdown.
Here is the code doing that:
_.forEach($scope.widget.instance.settings.serviceContractTypes, function (type) {
// if item in array matches what is selected in multi-select option
if(type === $('#contractType:selected').text().trim()) {
// do stuff
}
});
Hope this all made sense, and thanks very much for any direction you might offer...
(does not have to utilize lodash, I'm just used to using it)
jQuery's :selected selector only works for HTML options:
"The :selected selector works for elements. It does not work for checkboxes or radio inputs; use :checked for them."
(https://api.jquery.com/selected-selector/)
You say "I have a simple HTML select => option element which is populated from the back-end (not really relevant tho)"
This could be relevant. By default, an HTML option tag does not support multiple selections; it has to explicitly be created as a select multiple in order to support that. Can you share the HTML code for the option to make it clear whether that's a problem or this is a red herring?
Also, can you echo $scope.widget.instance.settings.serviceContractTypes and share to make sure it's actually matching what's available in the text of the options?
ADDENDUM - Wait, I think I figured it out!
The $('#contractType:selected') selects all the selected options in #contractType and concatenates them. Then $('#contractType:selected').text().trim() trims this down to the first word, which is just the first selected option. You should do something like $('#contractType:selected').text().split(" ") and then check if each type is in the resulting list.

Delete Dropdown values using jquery

I have a situation here,
Using JQuery I'm appending some values in drop down list.. Even it is one or two value that appended in drop down list..
For Add,
tableui+='<option value="">'+resourceadd+'</option>';
$('#resourcess').append(tableui);
When the page reloads automatically the value stored in db.
For example 4 values added in dropdown list (Values are not stored in db), I want to delete last value. I'm using,
$("#resourcess :last-child").remove();
The same condition, I want to delete middle of two values, How to do it??
Assuming you know the value of the option you want to remove, you could use filter:
$('#resources option').filter(function() {
return this.value == 'foo'; // insert your value here.
}).remove();
Or an attribute selector:
$('#resources option[value="foo"]').remove();
If you don't know the value, but do know the position of the option within the select, you could remove it by index using eq():
$('#resources option').eq(1).remove(); // remove the 2nd option

How to insert selected element from multiple selection into an input?

hi everyone i have a problem.
i have a multiple selection and i want to select something and put it into an input through a button i hope i have been clear :
i manage to get the select item with this jquery code :
var chosen= $('#droite option:selected').val();
droite is an id for the multiple selection
and i want to put it into the input wich has an id : chosen item here is my jquery code:
$("#chosenitem").prepend(chosen);
and it won't work do you have any idea why .?
You need to call val() on the select itself, not the options it contains:
var chosen = $('#droite').val();
Similarly, to set the value of the #chosenitem input, use val() with a parameter:
$("#chosenitem").val(chosen);
Note that if multiple options are selected in the #droite element, the value returned will be a comma delimited string, eg. foo,bar,baz.
You should call val() to set the value of #chosenitem
$("#chosenitem").val(chosen);

Using jQuery to add tick box values to a hidden field

I am trying to collect tick box values and assign the ticked boxes values to a hidden field so that I can save all of the ticked boxes values into one column in a comma delimited format, instead of many.
How could I go about doing that?
Thanx in advance!
You can use the map and join function like this:
var vals = $(':checkbox:checked').map(function(){
return $(this).val();
}).get().join(',');
// save the values to a hidden field
$('#hidden_id').val(vals);

Categories

Resources