Develop Reference

javascript jquery dropdown listbox - How to set option text at specific index (not 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');

Selection from dropdownlist javascript event

I have this html part code :
<p><label>Taxe </label>
<select id="id_taxe" name="id_taxe" style="width: 100px;" onchange="taxselection(this);"></select>
<input id="taxe" name="taxe" class="fiche" width="150px" readonly="readonly" />%
</p>
Javascript method :
function taxselection(cat)
{
var tax = cat.value;
alert(tax);
$("#taxe").val(tax);
}
I'd like to set the value of taxe input to the selected value from the dropdownlist.It works fine only where the dropdownlist contains more than one element.
I try onselect instead of onchange but I get the same problem.
So How can I fix this issue when the list contains only one element?

This works:
$('#id_taxe').change(function(){
var thisVal = $(this).val();
var curVal = $('#taxe').val();
if(thisVal != curVal)
$('#taxe').val(thisVal);
$('#select option:selected').removeAttr('selected');
$(this).attr('selected','selected');
});
Use the change method which is very efficient for select boxes. Simply check the item selected isn't currently selected then if not, set the value of the input to the selected value. Lastly you want to remove any option's attr's that are "selected=selected" and set the current one to selected.
Just include this inside a $(document).ready() wrapper at the end of your HTML and the change event will be anchored to the select field.
Hope this helps.
http://jsbin.com/populo

Either always give an empty option, or in your code that outputs the select, check the amount of options, and set the input value straight away if there's only 1 option.
A select with just 1 option has no events, since the option will be selected by default, so there's no changes, and no events.

As DrunkWolf mentioned add an empty option always or you can try onblur or onclick event instead, depending on what you are actually trying to do.

Ok, just to stay close to your code, do it like this: http://jsfiddle.net/z2uao1un/1/
function taxselection(cat) {
var tax = cat.value;
alert(tax);
$("#taxe").val(tax);
}
taxselection(document.getElementById('id_taxe'));
This will call the function onload and get value of the element. You can additionally add an onchange eventhandler to the element. I highly recommend not doing that in the HTML! Good luck.

Multiple select - value of deselect returns null

Description
I am using a jquery plugin chosen which pretty much does something like this:
This lets me add each option one by one or remove each option one by one. For every option selected, I create a new element with the selected option's value as the id.
Problem
The problem is when I remove an option from the list. For example:
$('#multiple-select').on('change', function(e){
alert($(e.target).val());
});
Will return the correct value if an option is added, however it returns null if we remove an option. I need to be able to get the value of the option being deselected so I can remove it in the other element.
Question
How can I get the deselected option's value to return the actual value instead of null? Or is there another way to bypass this problem?
All I need to be able to do is find the option being deselected and removing it from the other element (knowing that the element's id is built on the option's value).
Update
Remove code as requested:
$('body').on('change', benefs, function(e){
var $nbparts = $(participantNbParts),
$target = $(e.target),
$val = $target.val(),
$name = $target.text();
if($val == null){
//this is because we deleted something thus we need to remove it from $nbparts which is a pitty since we don't know what it was before it got deleted
}else{
//someone was added
$(create_row_expense_nb_parts_participant($name, $val)).appendTo($nbparts).show('slow');
$nbparts.parent().show('fast');
}
});

jQuery chosen provides selected and deselected using which you can identify selected and deselected values respectively, like:
$("#your_element_id").on('change', function (evt, params) {
var selected = params.selected;
var removed = params.deselected; //gives you the deselected value
//assuming your option ids are numbers
if( removed > 0 ) {
console.log( "Value removed is:" + removed );
}
});

From its documentation in the change event description you have
Chosen triggers the standard DOM event whenever a selection is made
(it also sends a selected or deselected parameter that tells you which
option was changed).
This suggests you should observe the arguments received by the event handler at run time to get a hint about (and most likely a reference to) the removed/deselected option.

Change disabled select(dropdownlist) based on another select(dropdownlist) value

Basically what I'm trying to do is self-explanatory in the title. Here's a snippet of code which enables the dropdown/select so it can be changed via client, but it will not disable after change:
function setLocVals(passedVal) {
$('#DropDownList1').removeAttr("disabled");
$('#DropDownList1').val(passedVal);
$('#DropDownList1'').attr("disabled", "disabled");
}
Is this even possible? Or am I looking at this completely the wrong way?
I could change to a textbox, but this is a dropdown containing US states. If there's a record for the user then the selection is restricted for the user, if no record exists, then they can select.

Just put a condition when you have to disable. See this fiddle
Use this approach.
First set the value in option.
Then retrieve the current value of the option and check if it is set to the one than you have passed then put the condition to disable else not
function setLocVals(passedVal) {
$('#DropDownList1').val(passedVal);
var value = $('#DropDownList1').val();
if(value == passedVal){
$('#DropDownList1').attr("disabled", "disabled");
}
}

jQuery - Get the value of unselected item in multiselect

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.