Develop Reference

How do I filter the options in multiple selects based on the option selected in one select?

I have three select boxes on a page: Company, Vendor, Type. I have the following function that when I select a company, it will filter the vendor options to only show vendors for the company selected.
jQuery("#companySel").change(function() {
if (jQuery(this).data('options') == undefined) {
jQuery(this).data('options', jQuery('#vendorId option').clone());
}
var id = jQuery(this).val();
if (id === '') {
var options = "";
} else {
var options = jQuery(this).data('options').filter('[companyId=' + id + ']');
}
jQuery('#vendorId').html(options);
});
That function works great for the one select box. I can do a second one for the Type select box and it also works great:
jQuery("#companySel").change(function() {
if (jQuery(this).data('options') == undefined) {
jQuery(this).data('options', jQuery('#typeId option').clone());
}
var id = jQuery(this).val();
if (id === '') {
var options = "";
} else {
var options = jQuery(this).data('options').filter('[companyId=' + id + ']');
}
jQuery('#typeId').html(options);
});
What I can't figure out how to do is to combine them. I want to select a company and then it filter BOTH the vendors for that company and the types for that company.
When I try to combine them, it works the first time; however, the second time you change the company select box, it tries to filter the filtered list, not the original list prior to the filter.

javascript function to prevent user from changing the value of a specific column

Hope you're doing well
I'm new to JavaScript and I need your help to complete the code below.
I've written a JS code as you can see below :
$("#input_KindCode").change(function () {
if ($(this).val() == 1) {
RunSql("Select DateKey From ProjectExecution.Contractinfo WHERE PlanCode = " + $("#input_PlanCode").val() + " AND ProjectCode = '" + $("#input_ProjectCode").val() + "' AND ContractCode = '" + $("#input_ContractCode").val() + "' AND KindCode = 1 ", function (data) {
if (data.length > 0) {
$("#input_DateKey").val(data[0].DateKey);
/////// THIS PART///////
} else {
$("#input_DateKey").val('');
EnableCol("DateKey");
}
});
}
else {
$("#input_DateKey")[0].value = '';
EnableCol("DateKey");
};});
In the 'RunSql' part of the code , I'm checking whether the 'datekey' column has value if true the value will show up in the field otherwise the user must enter the value for the column.
The problem is I want to add something to the code . I want to show the value if it exists AND I want to disable the column so that the user can not change the value . I can not use the function 'disable column' cause it does not work in my case are there any other functions ??
so I want a function to prevent user from changing the value of the column if it is being shown on the field. the function must be written in the 'This part' part of the code
Thanks in advance

You can disable this input field using jquery. To perform this you need to add one line.
Code:
if (data.length > 0) {
$("#input_DateKey").val(data[0].DateKey);
$("#input_DateKey").prop('disabled',true);
} else {
$("#input_DateKey").val('');
$("#input_DateKey").prop('disabled',false);
EnableCol("DateKey");
}

Show specific value in dropdown

I have a table where in each row for each id we have 'Client' column. When a user clicks on the row he is able to change client. I am using jquery.dialog for this operation. When a dialog appears the user sees a dropdownlist with Clients. How I can make that after dialog appears, the user sees the current client as the selected item in the dropdown? I've tried as below:
onDblClickRow: function (row, $element) {
$.getJSON('/ManageProjects/GetAvaibleClients/', function (clients) {
if (clients.length == 0) {
$('#clientNameEdit').empty();
$('#clientNameEdit').append('<option value="0">Tasks</option>');
}
$.each(clients, function (index, clientt) {
$('#clientNameEdit').append("<option value='" + clientt.Value + "'>" + clientt.Text + "</option>");
});
})
var currentClient = row.clientName; // Client name from Row
$('#clientNameEdit select').val(currentClient); // Tried to set like that
}
but doesn't work

The value passed in to .val needs to be the clientt.Value and not the text name.
if you dont have the clientt.Value, then try something like:-
$("#clientNameEdit option[text=" + currentClient + "]").attr("selected", true);
And bring the setting of the select inside of the success function.

The following alteration to your code snippet should do the trick:
onDblClickRow: function (row, $element) {
$.getJSON('/ManageProjects/GetAvaibleClients/', function (clients) {
if (clients.length == 0) {
$('#clientNameEdit').empty();
$('#clientNameEdit').append('<option value="0">Tasks</option>');
}
$.each(clients, function (index, clientt) {
$('#clientNameEdit').append("<option value='" + clientt.Value + "'>" + clientt.Text + "</option>");
});
var currentClient = row.clientName; // Client name from Row
$('#clientNameEdit').val(currentClient); // Tried to set like that but doesn't work
});
As indicated above, if you do the currentClient = row.clientName outside the success of the ajax call, it will probably fire before the dropdown is populated and therefore not have any effect.
Secondly the jQuery selector '#clientNameEdit select' should only be '#clientNameEdit' as it refer to the dropdown itself and not it's parent.

Change selected text of a dropdown without changing the text in the option?

How to change the selected text of the dropdown without changing the text in the option? For ex: if dropdown has code and description both but on select i only wants to display the code and remove the description but description should be present in the dropdown.
Populating data in the dropdown:
$.each(jtc12_2_2_reasoncode1List, function(i, item) {
$('#jtc12_2_reasonForFailure1').append($('<option>', {
value : item.Code,
text : item.Code + " " + item.Description
}));
});
Change the text of selected option:
var jtc12_2_2_reasonCode1Code = $("#jtc12_2_reasonForFailure1 :selected").val();
var jtc12_2_2_reasonCode1Desc = _.filter(e.data.jtc12_2_2_reasonCode1List, function(item) {
return item.Code === jtc12_2_2_reasonCode1Code;
});
jtc12_2_2_reasonCode1Desc = jtc12_2_2_reasonCode1Desc[0].Description;
$("#jtc12_2_reasonForFailure1 option[value = " + jtc12_2_2_reasonCode1Code + "]").text(jtc12_2_2_reasonCode1Code);

One way to achieve this is to add a new option at runtime and select that (the newly added) value instead of the selected value. Then the selected value can be removed on dropdown's click event.
Assuming the code and description are separated by a colon (:) refer the following code.
var onSelect = false;
$('select').click(function (e) {
if ($(this).val() !== '' && !onSelect) {
$(this).find('option:selected').remove();
} else {
onSelect = false;
}
});
$('select').change(function (e) {
var selectedVal = $(this).val();
var newVal = selectedVal.split(':')[0];
$(this).append($('<option>', {
value: newVal,
text: newVal
}));
$(this).val(newVal);
$(this).find('option:selected').hide();
onSelect = true;
});
jsFiddle

Select unselect checkboxes using jquery

I have a list of checkboxes in my kendo grid.Select all option is also there.
Problem is When i click select all then all the checkboxes selected and then unselect some checkboxes and going to save then it shows me all the checkboxes.(un checked checkboxes also shown )
My Code
$('#itemGrid').on('change', '.usedchk', function () {
var checked = $(this).is(':checked');
var grid = $('#itemGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
var selected = $('#selected').val();
var id = dataItem.itemId;
if ($('#selected').val().indexOf(id) == -1) {
if ($('#selected').val() == '') {
$('#selected').val(id);
} else {
$('#selected').val(selected + "," + id );
}
}
});

use below code on save, to get all checked checkboxes as a comma separated string
var output = $.map($('#selected:checked'), function(n, i){
return n.value;
}).join(',');