I am cycling through all values of items array and appending them to #selectbox like this:
$("#Selectbox").append(
$("<option></option>").attr(
"value", items[i][0]).text(items[i][1])
);
How within the same loop cycle I could make particular item "selected"? Thanks
You can check if the item is what you want to select like this:
const items = [1, 2, 3];
const selected = 2;
for(var i in items) {
let item = items[i];
let option = $("<option></option>");
if(item == selected) {
option.attr('selected', true);
}
$("#Selectbox").append(option.attr("value", item).text(item));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="Selectbox">
<option>Select an item</option>
</select>
Related
I have only started js recently, so i hope this makes sense..
I have made a simple dynamic form which starts with a table of 4 rows. After the heading row, the remaining 3 rows have +/- symbols which are to add or delete rows as necessary.
The add row functionality is currently working, however, even after assigning the correct class to the new row, the event listener wont work for the new buttons (even thought i have re-assigned the number of buttons within that class).
After adding the row, i re-assign btnAddRows and when logged to the console it is increasing with each row added. I can't figure out why it wont get captured in the for loop?
Thanks
//select elements on DOM
let btnAddRows = document.querySelectorAll('.btnADD');
let myTable = document.querySelector('#SecProp');
let myTableRows = document.querySelector('.tableRows');
for (let i = 0; i < btnAddRows.length; i++) {
btnAddRows[i].addEventListener('click', function () {
console.log(btnAddRows.length);
btnAddRows = document.querySelectorAll('.btnADD');
const rowNum = Number(btnAddRows[i].id.slice(6));
// console.log(rowNum);
// if (rowNum === myTableRows.length - 1) {
// addTableRow(rowNum);
// } else {
addTableRow(rowNum);
// }
btnAddRows = document.querySelectorAll('.btnADD');
myTable = document.querySelector('#SecProp');
myTableRows = document.querySelector('.tableRows');
});
}
const addTableRow = function (rowNum) {
//insert row into table
const addRw = myTable.insertRow(rowNum + 1);
const newRow = myTable.rows[rowNum + 1];
newRow.className = 'tableRows';
console.log(myTable.rows[rowNum + 1], typeof myTable.rows[rowNum + 1]);
const cell1 = newRow.insertCell(0);
const cell2 = newRow.insertCell(1);
const cell3 = newRow.insertCell(2);
const cell4 = newRow.insertCell(3);
const cell5 = newRow.insertCell(4);
cell1.className = 'column1';
cell2.className = 'coordsColumn';
cell3.className = 'coordsColumn';
cell4.className = 'buttons';
cell5.className = 'buttons';
cell1.innerHTML = `<td> ${rowNum + 1}</td>`;
cell2.innerHTML = '<td ><input type = "text" name="" value = ""/><td>';
cell3.innerHTML = '<td ><input type = "text" name="" value = ""/><td>';
cell4.innerHTML = `<td ><button class="btnADD btn btn-success" id="btnADD${
rowNum + 1
}"> + </button>`;
cell5.innerHTML = `<td ><button id="btnDEL${
rowNum + 1
}" class="btnDEL btn btn-success"> -</button>`;
};
I have a problem, I like to show a select text values of a MultiSelect control on a tooltip.
I only can show the value(numeric) from MultiSelect, this is my code:
var multiselect = $("#combo_multi").data("kendoMultiSelect");
value2 = multiselect.value(); //show only numeric values ->14376, etc.
Show the numeric values together without spaces. ->14376
I like to show the text value, not the numeric value.
I think I have to use an array for show the text value, but I don´t know how do it.
If somebody have the response of this problem, I appreciate the solution. Thanks.
Maybe this could help you a bit
var multiselect = $("#combo_multi").data("kendoMultiSelect");
var value2 = multiselect.value();
var selectedValues = value2.split(",");
var multiSelectData = multiselect.dataSource.data();
for (var i = 0; i < multiSelectData.length; i++) {
var numberValue = multiSelectData[i].number;
for (var j = 0; j < selectedValues.length; j++) {
if (selectedValues[j] == numberValue) {
// here we get description for value
var desc = multiSelectData[i].description;
break;
}
}
}
Example other
$("#multiselect").kendoMultiSelect();
var multiselect = $("#CityTo").data("kendoMultiSelect");
var dataItem = multiselect.dataItems();
//***Debug
var CityArray = new Array();
CityArray = dataItem;
alert(JSON.stringify(CityArray));
//***End Debug
//**************** Applied example
var newHtml = "";
var item = dataItem;
$.each(item, function (index, item) {
newHtml += '<div class="panel panel-default" ><div class="panel-heading">' + item.City_Name + '</div><div class="panel-body">Panel Content</div></div>';
});
$("#CityCount").html(newHtml);
You can see the details "dataItem" using "item."
item.City_Name
I'm on a newer version of Kendo UI so possibly things have changed since you asked this. I'll give you an updated answer..
var multiselect = $("#combo_multi").data("kendoMultiSelect");
var selectedValues = multiselect.value();
var multiSelectData = multiselect.dataSource.data();
var count = selectedValues.length;
for (var i = 0; i < multiSelectData.length; i++) {
if (selectedValues.indexOf(multiSelectData[i].Value) >= 0 ) {
//found, do something
var selectedText = multiSelectData[i].Text;
count--;
}
if (count == 0) {
break;
}
}
I am using a telerik radcombobox for a drop down list inside a user control in a web forms application. I need to delete all the items in the box, let's say id is ddlVeihicleMake and repopulate it with a new list of item passed to the function. Here is an example of what I understand it should be like,
function addNewItems(selectRef, optionsArray, valuesArray) {
var combo = document.getElementById("ctl00_cpMain_ctl01_appRadPaneltabVehicleInformation_i0_i0_tabVehicleInformation_ddlVehicleMake_Input");
combo.get_items().clear();
for (var idx = 0; idx < optionsArray.length; idx++) {
if (valuesArray == "") {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text(optionsArray[idx]);
combo.trackChanges();
combo.get_items().add(comboItem);
} else {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text(optionsArray[idx]);
combo.trackChanges();
combo.get_items().add(comboItem);
}
}
It fails for me on get_items().clear() and get_itmes().add(comboItem). Appreciate any help I can get.
Thanks!
Try something like this:
function DeleteItems(sender, args)
{
var combo = window.$find("<%= cboMyComboBox.ClientID %>");
combo.trackChanges();
for (var i = 0; i < combo.get_items().get_count(); i++) {
combo.get_items().remove(combo.get_items().getItem(i));
}
combo.commitChanges();
}
I have an editable <iframe> with the some HTML code in it. I need get all <a> tags in my range. I tried this code but it doesn't work:
var select = document.getElementById(iframe_id).contentWindow.getSelection();
var range = select.getRangeAt(0);
//HERE I WANT TO FIND ALL TAGS IN THIS RANGE AND IF IT "A" - ADD NEW ATTRIBUTE "CLASS". SOMETHING LIKE THIS
var parent = rng.commonAncestorContainer;
for(var i=0; i<parent.childNodes.length; i++)
{
if(parent.childNodes[i].tagName.toLowerCase() == "a")
parent.childNodes[i].setAttribute("class", "href_class");
}
You can use getElementsByTagName() to get all <a> tags of the range container and then check for each of them whether it actually belongs to the range using range.compareBoundaryPoints() (only parts of the container might be selected). Something like this:
var links = rng.commonAncestorContainer.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
var linkRange = document.createRange();
linkRange.selectNode(links[i]);
if (rng.compareBoundaryPoints(Range.START_TO_START, linkRange) <= 0 && rng.compareBoundaryPoints(Range.END_TO_END, linkRange) >= 0)
{
links[i].className = "href_class";
}
}
This should get you started in the right direction. This code does not do any null reference checks on the iframe, selection, range or list.
function addAnchorClass(targetFrameId) {
var targetIframe = document.getElementById(targetFrameId).contentWindow;
var selection = targetIframe.getSelection();
var range = selection.getRangeAt(0);
var alist = range.commonAncestorContainer.getElementsByTagName("a");
for (var i=0, item; item = alist[i]; i++) {
if (selection.containsNode(item, true) ) {
item.className += "PUT YOUR CSS CLASS NAME HERE";
}
}
}
Do you guys know of any .net controls with 2 listboxes that can move items from left to right and vice versa?!
Like a dual listbox type of thing.
I have already looked at http://ajaxlistbox.codeplex.com/ it seems to be pretty sweet.
just want to know any suggestions.
Here's a way:
Make two ListBoxes, the first shows all available item, the second shows what the user chooses. You also need a TextBox to hold a copy of the chosen items, since it is not possible to retrieve ListBox items in C# if they were added via javascript. Make the TextBox hidden, so the user cannot accidentally mess up the items.
Click an item in the first listbox and it appears in the second "chosen" listbox. Click on chosen item in the second list and it disappears. You could alter this so items are removed from the first list after being chosen.
I call AddJavascript from my Page_Load method.
ListBoxFilteredProfiles is my first TextBox, ListBoxSelectedProfiles is the second.
private void AddJavascript()
{
// This javascript function adds the item selected in one listbox to another listbox.
// Duplicates are not allowed, items are inserted in alphabetical order.
string OnChangeProfileListBoxJavascript =
#"<script language=JavaScript>
<!--
function OnChangeSelectedProfiles()
{
var Target = document.getElementById('" + ListBoxSelectedProfiles.ID + #"');
var Source = document.getElementById('" + ListBoxFilteredProfiles.ID + #"');
var TB = document.getElementById('" + TextBoxProfiles .ID + #"');
if ((Source != null) && (Target != null)) {
var newOption = new Option(); // a new ListItem
newOption.text = Source.options[ Source.options.selectedIndex ].text;
newOption.value = Source.options[ Source.options.selectedIndex ].value;
var jj = 0;
for( jj = 0; jj < Target.options.length; ++jj ) {
if ( newOption.text == Target.options[ jj ].text ) { return true; } // don't add if already in the list
if ( newOption.text < Target.options[ jj ].text ) { break; } // add the new item at this position
}
for( var kk = Target.options.length; kk > jj; --kk ) { // bump the remaining list items up one position
var bumpItem = new Option();
bumpItem.text = Target.options[ kk-1 ].text; // copy the preceding item
bumpItem.value = Target.options[ kk-1 ].value;
Target.options[ kk ] = bumpItem;
}
Target.options[ jj ] = newOption; // Append the item in Target
if (TB != null) {
// Copy all the selected profiles into the hidden textbox. The C# codebehind gets the selections from the textbox because listbox values added via javascript are not accessible.
TB.value = '';
for( var jj= 0; jj < Target.options.length; ++jj ) { TB.value = TB.value + Target.options[ jj ].value + '\n'; }
}
}
}
// -->
</script> ";
// This javascript function removes an item from a listbox.
string OnChangeRemoveListBoxItemJavascript =
#"<script language=JavaScript>
<!--
function OnChangeRemoveProfile()
{
var Target = document.getElementById('" + ListBoxSelectedProfiles.ID + #"');
var TB = document.getElementById('" + TextBoxProfiles.ID + #"');
Target.remove( Target.options.selectedIndex );
TB.value = '';
// Copy all the selected profiles into the hidden textbox. The C# codebehind gets the selections from the textbox because listbox values added via javascript are not accessible.
for( var jj= 0; jj < Target.options.length; ++jj ) { TB.value = TB.value + Target.options[ jj ].value + '\n'; }
}
// -->
</script> ";
ClientScript.RegisterStartupScript( typeof(Page), "OnChangeSelectedProfiles", OnChangeProfileListBoxJavascript );
ClientScript.RegisterStartupScript( typeof(Page), "OnChangeRemoveProfile", OnChangeRemoveListBoxItemJavascript );
ListBoxFilteredProfiles.Attributes.Add("onchange", "OnChangeSelectedProfiles()" );
ListBoxSelectedProfiles.Attributes.Add("onchange", "OnChangeRemoveProfile()" );
}