With the push of a button, I'm iterating through a list of options in a select. I wish to append all of these option (values of the options) to a hidden fields, separated by a pipe |. So far I've come up with this, however, It just puts the last value of the option in the select in the hidden field?
//Select all cities
$jq("input#checkcities").click(function () {
$jq(".select-cities > option").each(function () {
var zipCodeValue = $jq(this).val();
$jq(".select-cities option").attr("selected", "selected");
$jq(".select-cities option").appendTo(".chosen-cities");
//Put value of cities in hidden field.
$jq('.hiddenFieldChosenCities').val(zipCodeValue);
});
});
You can use map method:
var zipCodeValues = $jq(".select-cities > option").map(function () {
return this.value;
}).get().join('|');
$jq('.hiddenFieldChosenCities').val(zipCodeValues);
Try like this
$jq('.hiddenFieldChosenCities').val($jq('.hiddenFieldChosenCities').val() + '|' + zipCodeValue);
You need to add the value:
$jq('.hiddenFieldChosenCities').val($jq('.hiddenFieldChosenCities').val() + '|' + zipCodeValue);
Create the string zipvalues
Loop over the cities and append cities to zipvalues
Finally set the hidden field value to zipvalues.
// Select all cities
$jq("input#checkcities").click(function () {
var zipvalues = "";
$jq(".select-cities > option").each(function () {
var zipCodeValue = $jq(this).val();
$jq(".select-cities option").attr("selected", "selected");
$jq(".select-cities option").appendTo(".chosen-cities");
zipvalues += "|" + zipCodeValue;
});
//Put value of cities in hidden field.
$jq('.hiddenFieldChosenCities').val(zipvalues);
});
Related
I want to select one of the list box item when user select the table row.
The last item user added SupplierCode to a table by clicking ADD Button. When user want to modify the records from table, once they click that particular row, the value should move to FilterValue and Field in the list box should select that particular Field Name which is selected by user.
Now user select the first row to modify the value. That value is moved to FilterValue textbox, But list box item is not selected automatically to StoreID
But when I check the code in browser. it shows selected for that particular item which item user wants to select, but the color is not changed.
This is my code
Jquery code
//SELECT Table ROW
$(document).on("click", '#queryTable tbody tr', function () {
var tr = $(this);
var FieldName = tr.find("td:first").text();
var Values = tr.find("td:last").text();
FieldName = FieldName.replace('AND ', '');
FieldName = FieldName.replace('OR ', '');
Values = Values.replace('IN(', '');
Values = Values.replace(')', '');
alert(FieldName + ' ' + Values);
$("#FilterField option[value=" + FieldName + "]").attr("selected", true);
$("#txtFilterValue").val(Values);
});
try with following code and check if it works
//SELECT Table ROW
$(document).on("click", '#queryTable tbody tr', function () {
var tr = $(this);
var FieldName = tr.find("td:first").text();
var Values = tr.find("td:last").text();
FieldName = FieldName.replace('AND ', '');
FieldName = FieldName.replace('OR ', '');
Values = Values.replace('IN(', '');
Values = Values.replace(')', '');
//alert(FieldName + ' ' + Values); provided your FieldName as correct value
$("#FilterField").val(FieldName);
$("#txtFilterValue").val(Values);
});
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
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(',');
I'm Using Dropdownlist for verticals and a Multiselect listbox for accounts and a button in a viewpage. When I change the dropdown(verticals) Multiselect listbox will be visible and populated with corresponding Accounts.when I'm selecting the items(Accounts) from multiselect listbox, I want get the selected values as comma separated values in a variable. I'm Using the following jQuery:
$(document).ready(function () {
$('#acc').hide();
$('#ddlacc').hide();
$('#smt').click(function () {
var vertical=$('#vdropdown :selected').text();
var selectedvalues = $('#ddlacc > :selected').map(function () { return $(this).val(); }).get().join(',');
var account = $('#ddlacc > :selected').map(function () { return $(this).text(); }).get().join(',');
getGrid(vertical,account);
});
});
here is the html helper i'm using for dropdown,
<b>Vertical : </b>#Html.DropDownList("Var_Vertical", new SelectList(Model.lstTravelReadyEntities, "Var_Vertical", "Var_Vertical", Model.lstTravelReadyEntities), " ", new { id = "vdropdown", #onchange = "javascript:GetAccounts(this.value);" })
Following is the function for populating multiselect listbox,
function GetAccounts() {
var url = "/Home/Account/";
$.ajax({
url: url,
data: {},
cache: false,
type: "POST",
success: function (data) {
var markup = "";
for (var x = 0; x < data.lstTravelReadyEntities.length; x++) {
markup += "<option value=" + x + ">" + data.lstTravelReadyEntities[x].Var_AccountName + "</option>";
}
$('#acc').show();
$('#ddlacc').html(markup);
$('#ddlacc').multiselect();
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
Here i can get only last selected item in a variable(selectedvalues). What change i have to do for getting comma separated value in a variable(selectedvalues)?
With multiSelect plugin you need to use the getChecked method of the plugin:
So:
var allChecked = $('#ddlacc').multiselect('getChecked'); //get the checked cached elements
var selectedvalues = $(allChecked).map(function () {
return this.value; //get the values
}).get().join(',');
var account = $(allChecked).map(function () {
return this.title; //text stored as title
}).get().join(',');
Demo
Seems you're using erichynds jQuery multiselect
http://www.erichynds.com/blog/jquery-ui-multiselect-widget
You can get all selected elements with method getChecked()
var str='';
$("select").multiselect("getChecked").each(function(){str+=this.value+','});
I have a dropbox that when selected it displays its respective fields
in first image you can see there is A person without an ID so when selected it displays
something like:
if you see I added 12
Now if i change my mind and select the other option (person with ID) one field is displayed like:
I added 9999
That is ok, but now if I change my mind again and return to other selected option the values are still there like:
I would like to clean them... How can I accomplish that?
It does not matter to fill all respective fields again, I want to reset values in that case if select
person without ID, delete the 9999, on the other hand, if i select person with Id, i want to reset the vakue 12
please take a look at my fiddle
some of the jquery code is:
//function available
function validate(id, msg) {
var obj = $('#' + id);
if(obj.val() == '0' || obj.val() == ''){
$("#" + id + "_field_box .form-error").html(msg)
return true;
}
return false;
}
$(function () {
$('#has_id').show();
$('#select_person').change(function () {
$('.persons').hide();
if ($('#select_person').val() == 'typeA') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type A--').appendTo("#has_id");
$("<option/>").val('person-A-withID').text('person-A-withID').appendTo("#has_id");
$("<option/>").val('person-A-withoutID').text('person-A-withoutID').appendTo("#has_id");
}
if ($('#select_person').val() == 'typeB') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type B--').appendTo("#has_id");
$("<option/>").val('person-B-withID').text('person-B-withID').appendTo("#has_id");
$("<option/>").val('person-B-withoutID').text('person-B-withoutID').appendTo("#has_id");
}
});
$('#has_id').change(function () {
$('.persons').hide();
$('#' + $(this).val()).show();
});
});
var validation = function(){
var err = 0;
err += validate('select_person', "select person.");
err += validate('has_id', "Select whether it has an ID or not.");
if(err == 0){
alert('continue');
}else{
alert('error');
}
};
Simply make this change:
$('#has_id').change(function () {
$('.persons input').val('');
$('.persons').hide();
$('#' + $(this).val()).show();
});
New fiddle: http://jsfiddle.net/6m27M/
This simply clears out all the values any time a change is made to the #has_id dropdown.