I have 2 dropdown groups as shown below
on clicking + button more groups will be created dynamically.
and the subcategory drop down is dynamically populated (from database) in the onchange event of category dropdown
The problem is i want to avoid the duplication of selection in subcategory dropdown
Any ideas given are welcome
EDIT 1:
$('.skill-subcategory').each(function(){
//var value = $(this).val();
var arr = [];
var selectedValue=$(this).attr('selected').value;
arr.push(selectedValue);
});
arr.each(function(i){
//var thisValue= $(this).value;
var selectedValuea = $(this).val();
var otherDropdowns = $('.skill-category').not(this);
otherDropdowns.find('option').prop('disabled', false); //reset all previous selection
console.log("value:" + selectedValuea);
otherDropdowns.find('option[value=' + selectedValuea + ']').prop('disabled', true);
});
});
//if(thisValue == arr[i])
//$(this).attr('disabled', true);
});
note:
.skill-subcategory is the class used in subcategory dropdown
.skill-category is the class used in category dropdown
Related
I want to fetch a selected data from all the pages.
For example I select 1 item from the page 1 and the 2nd item from the page 2. When I click on the button (Get Checked Rows). I want to fetch those id's that I just selected from the different pages.
So far this is what I found, but it works for a single pages only. FULL DEMO
var grid = $("#grid").data("kendoGrid");
var selectedRows = grid.select();
selectedRows.each(function(index, row) {
var selectedItem = grid.dataItem(row);
alert(selectedItem.ProductID);
});
Is there any other way, instead creating a template/id for a checkbox.
You need to use the selectedKeyNames method rather than the select method.
If you update your code like this (updated DEMO), you can see it work:
$("#button").kendoButton({
click: function(e){
var grid = $("#grid").data("kendoGrid");
var selectedRows = grid.select();
//show all selected keys across all pages
alert(grid.selectedKeyNames());
selectedRows.each(function(index, row) {
var selectedItem = grid.dataItem(row);
alert(selectedItem.ProductID + ' | ' + selectedItem.ProductName);
});
}
});
More info and a Telerik example can be found here: https://docs.telerik.com/kendo-ui/knowledge-base/checkbox-selection-dataitems-selected-rows
I have some rows in a grid that are editable by a user. When the user clicks the edit button in a grid row, i'm displaying a multi-select dropdownlist
("ddlEditRegionList") with options to choose from. When this dropdownlist is shown i want to keep the already saved selections checked.
I'm trying with the code snippet below but that does get my existing selections.
//Get currently selected options into array regionArr
var region = $.trim($tr.find(".tdRegion").html());
$("#hidRegionList").val($.trim($tr.find(".tdRegion").html()));
var regionArr = region.split(',');
$tr.find(".tdRegion").html($("#divRegionList"));
//keep selected options checked in edit mode - this isn't working
$('#ddlEditRegionList option').map(function () {
for (var i = 0; i < regionArr.length; i++) {
if ($.trim($(this).text()) == $.trim(regionArr[i])) {
return this;
}
}
}).attr('selected', 'selected');
Note that i'm using jquery-3.2.1
Try .val() instead of .text(), Like:
if ($.trim($(this).val()) == $.trim(regionArr[i])) {
return this;
}
I im using jquery choose plugin that is using two input boxes when page loads...and a need like in this example when i select number 1 in first box that this number is removed from second input box....this works fine...but problem is when i add dynamically input box i can't get item number 1 removed from added dynamic input box.
So question is: how can i remove selected values from input box when selecting other input boxes that is added dynamically and selected items in each select box is not visible in all selected box that exists and is added dynamically?
Here is jsfiddle:
[http://jsfiddle.net/dq97z/640/][1]
And here is picture what i need:
Maybe this will help you out
http://jsfiddle.net/s9r73qjm/
//an array to save selections
var selectedVals = [];
//push to the array when we have selected
selectedVals.push(selectedValue);
//check on the values when building the drop down
$( "#btn_newrow" ).click(function() {
var newList = document.createElement("select");
newList.dataset.placeholder = "Number row 3";
newList.style.width = "350px";
var newListData = new Option("placeholder", "placeholder");
for (var i = 0; i < 6; i++){
if (selectedVals.indexOf(i.toString()) == -1){
//then it hasn't been selected
newListData = new Option(i.toString(), i.toString());
newList.appendChild(newListData);
}
$( ".wrapper" ).append(newList);
}
});
The DEMO
should be pretty explanatory.
There are rows with radio buttons and a check box at the end.
Help 1. What I would like is when ONLY the check box is checked, the values of the checked radio button and along with the value of the textarea and dropdown (if Missing radio button is clicked) to be populated in the text area which is at the bottom?
Help 2. Right now when the radio button is clicked, all the checked radio buttons value are showing. Where am I going wrong ?
To help you understand, from the text area, the data which is separated by ~ and | gets passed over to the next stage when the save all button is clicked. Initially when the page loads the radio buttons are pre-checked depending on the previous page but nothing needs to be populated in the bottom text area.
We use jquery 1.6.4
function updateSummary($this){
$this.closest('[id]').find('.r-title, .m-notes-wrapper, .up-arrow, .down-arrow').hide();
var totalRd = $('table').find('input:radio:checked').length;
// Array of clicked items
var clicked = [];
// Set number of selected items
$("#totalRd .rd-count").html(totalRd);
// Show the title and notes next to the radio button
$this.siblings('.r-title, .m-notes-wrapper, .up-arrow, .down-arrow').show();
// Find checked radio buttons that has been clicked
$('table').find("input[type=radio]:checked:enabled").each(function () {
// Find closest ancestor with an id
// See if we have a text box, if so use the text
var $text = $(this).parent().find('textarea.m-notes:visible');
var missingReason = $(this).parent().find('.reason').val();
var selectedId = $(this).closest('[id]').attr('id');
var value = selectedId + "~" + $(this).val();
if ($text.length)
{
value += "~" + missingReason +"~" + $text.val();
}
clicked.push(value);
}); //checked
// Display the selected ids
$("#inputhere").val(clicked.join('|'));
}
// Radio selection changes selected options
$("input:radio").click(function () {
updateSummary($(this));
});
$('textarea.m-notes').bind('keyup', function () {
updateSummary($(this).siblings(':radio'));
});
$('select.reason').change (function () {
updateSummary($(this).siblings(':radio'));
});
$("input:checkbox").change(function(){
updateSummary($(this));
});
Thanks for your help.
You could add a condition when updating your textarea :
if($('table').find("input[type=checkbox][name='" + $(this).attr('name') + "']").is(':checked')) {
var $text = $(this).parent().find('textarea.m-notes:visible');
var missingReason = $(this).parent().find('.reason').val();
var selectedId = $(this).closest('[id]').attr('id');
var value = selectedId + "~" + $(this).val();
if ($text.length)
{
value += "~" + missingReason +"~" + $text.val();
}
clicked.push(value);
}
please view what i have
$("#checkbox").change(function() {
if ($('input#checkbox').is(':checked')) {
var checkvalue = +$(this).val(),
$boxInput = $('input[name="box"]');
$boxInput.val(+$boxInput.val() + checkvalue);
} else {
var checkvalue = +$(this).val(),
$boxInput = $('input[name="box"]');
$boxInput.val(+$boxInput.val() - checkvalue);
}
});
$("#numbers").change(function() {
var firstdropvalue = +$(this).val(),
$boxInput = $('input[name="box"]');
$boxInput.val(+$boxInput.val() + firstdropvalue);
});
$("#morenumbers").change(function() {
var seconddropvalue = +$(this).val(),
$boxInput = $('input[name="box"]');
$boxInput.val(+$boxInput.val() + seconddropvalue);
});
demo:
http://jsfiddle.net/nZ9J8/1/
i want to update an input text box value from multiple dropdowns and a checkbox.
first, i don't want it to keep adding and adding each time a different dropdown selection is made.
here is breakdown...
checkbox = 0 when unchecked, 2 when checked
dropdown one has 0, 1, 2, 3, and 4
dropdown two has 0, 1, 2, 3, and 4
input text box should be checkbox + dropdown one + dropdown two
if checkbox is checked and 2 is selected in both dropdowns then it's 2 + 2 + 2 which should make text field 6.
if checkbox is unchecked and 1 is selected in dropdown one and 3 is selected in dropdown two then it's 0 + 1 + 3 which should make text field 4.
the trick is if a person changes their mind and changes the checkbox or dropdowns, the text field should update accordingly going up or down as needed.
Try this. http://jsfiddle.net/BxSU6/19/
function calculate(){
var checkVal = ($('input#checkbox').is(':checked')) ? $('input#checkbox').val() : 0;
var sum = parseIntX($("#numbers").val()) + parseIntX($("#morenumbers").val()) + parseIntX(checkVal);
$('#box').val(sum);
}
function parseIntX(num){
return (isNaN(parseInt(num))) ? 0 : parseInt(num);
}
$("#numbers, #morenumbers, #checkbox").change(function() {
calculate();
});`