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
Related
I have and issue that i can't wrap my head around, so i hope i could get some help and new knowlage to use.
i am building a form, where the user needs to book an item, but once selected i will not have it been able to be selected again.
so what my plan was, is to have a dropdown menu , that you can select what ever from, if you want one item more , you click a button and get a new dropdown menu, allowing you to select a new item, but this new dropdown, should not contain the item from the first dropdown.
i had tried to build a thing like this
$(function() {
$('.dropdown').change(function() {
dropdownvalue = $(this).val();
$('.dropdown').not(this).find('option[value="' + dropdownvalue + '"]').remove();
});
});
https://jsfiddle.net/loonitun/tya85x4j/2/
How ever, if my user changes mind, the option is now gone, even if something else is selected ( i know it is the Remove part in the javascript, but i am unsure how to restore the previous option )
if anyone have an solution, or some guidence to how i can get it done i would apreciate it very much.
an alternative solution i had in my mind, that may work, was to do an onchange add to array, but then i would need another dropdown to remove items from that array, and i think that may confuse the user.
What you want to do is - filter your options when you select someting instead of removing them from the array.
for example
let options = [1, 2, 3, 4] // this is an array of options with ids
let valuesSelected = []; // once you choose a value from the dropdown you need to push it to valuesSelectedArray
Every time you choose something in a dropdown you need to filter this value out of you options array
options.filter(option => !valuesSelected.includes(option))
this will give you array of options without values you already selected.
My question is, using javascript / jquery, "How do you change the value of a dropdown option at a specific index that is NOT the selected index?"
I have a dropdown list of values. User can select an option. I have a method which enables the user to change the value at that selected option. The value gets changed and all is well.
Here is my issue: If the user decides to cancel, or changes to a different value in the list without saving the changes to the database, I want to undo the value change.
I have the index of the changed option.
I have the old value of the changed option.
I have the new value of the changed option.
If the user has selected a different option, I don't want to change the index of the newly selected option. I just want to reset the value of the option the user changed.
I've tried a .each method:
var changedTitle = $('#ddTitle').text();
$("#ddTitle option").each(function() {
if($(this).text() == changedTitle) {
$(this).text(savedTitle);
}
});
I like the idea of looping through each one but I never see execution loop through a second time and the browser never comes back.
I've tried a .filter method:
var changedTitle = $('#ddTitle').text();
$("#ddTitle option").filter(function(index) { return $(this).text() === changedTitle; }).attr('selected', 'selected');
$("#ddTitle option").filter(function() {
return $(this).text() === changedTitle;
}).prop('selected', true); // changes the selected option
I got the above filter code to work but it sets the selected option.
$("#ddTitle option").filter(function() {
return $(this).text() === changedTitle;
}).prop('text', savedTitle); // execution never returns
I tried using the text property on the option but jquery gets very busy and execution never returns.
I've tried finding by the text value, which is silly because I know the index:
$("#ddTitle option[value='" + theText + "']").attr('selected', 'selected');
If these get an option it is the first option (0) or the browser hangs.
Is there a way to change the text value at a specified index programmatically in javascript or using jquery? Nothing I've tried works.
To change the value of the 5th option, do:
$('#yourselect').children('option:eq(4)').html('your text');
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.
Although this may sound dead simple, the matter is complicated by the fact I can only use the change() trigger on the select element. I am using the 'Chosen' jQuery plugin which basically modifies the multi select box on the page.
Whenever a item is selected or unselected, the plugin triggers the change event on the original select element. I am obviously able to get all the unselected items, but I need the one that was just unselected that caused the change event to trigger.
So I have the following function, the bit in the middle is what I need to capture the item that was just unselected. #cho is the id of the original select element.
$("#cho").chosen().change( function() {
// Need code here to capture what item was just unselected, if any...
})
Store value when the user changes the the check box.
var preVal;
$("input[name='g']").on("change",function(e){
if(preVal){
alert(preVal);
}
preVal=$(this).val();
});
Check this http://jsfiddle.net/fcpfm/
1.Use hidden field
2.Hidden field value initially empty.
3.Onchange put the selected value in a hidden field.
4.If onchange is happening again , hidden field value is the previously selected value.
$("#cho").chosen().change( function() {
var hidvalue = $('#hiddenfield').val();
if (hidvalue ) {
//Get the previously selected ids
var prev_ids = $('#hiddenfield').val();
//Then Update currently selected ids
$('#hiddenfield').val('currently selected ids');
} else {
//Update currently selected ids
$('#hiddenfield').val('currently selected ids');
}
})
Try using a variable to store the selected item. Update it each time when item changed. I cant add comment. That is why I am posting it as an answer.
I'd like to remove a specific option from some select boxes (all with the same values) if their value is "1". The problem is, I'm having difficulty filtering elements down to that specific value.
At the moment, the closest I've got is
$('.demoClass').find('option:contains(1)').remove();
but there are two problems. Firstly, this seems to iterate over the (displayed) contents of the option, not its value...and secondly, it seems to return true the contents contain that value, as opposed to being that value. (Eg contains(1) will return true for (1, 10, 11, 12)...when I want it to return true for "1" only)
In short, what I'm looking to do is find the timeslot option with value X inside all select boxes of class ".demoClass" and remove them. Any suggestions appreciated.
Try this...
$('.demoClass').find('option[value="1"]').remove();
This utilizes the Attribute Equals Selector
Try this:
$('.demoClass').find('option[value=1]').remove();