How to set values in kendo multiselect using the text value we have i mean not with value.
multi = $("#multiselect").kendoMultiSelect({
dataSource: data,
dataTextField: "exampletext",
dataValueField: "examplevalue",
tagTemplate: "<span class='' entity_id =" + 'examplevalue' + " path ="+'examplevalue' + " >" + 'examplevalue' + "</span>",
}).data("kendoMultiSelect");
To set the value in kendo multi select is working fine with below code :
multi.value(["value1","value2"]);
I need to set with text value.
There is no direct property to set the value based on text.
It can be achieved by this way:
HTML:
<select id="multiselect" multiple="multiple">
<option value="1">Item1</option>
<option value="2">Item2</option>
</select>
Javascript:
<script>
$("#multiselect").kendoMultiSelect();
var multiselect = $("#multiselect").data("kendoMultiSelect");
var d = multiselect.dataSource.data();
var val = [];
var selectedItems = ["Item1", "Item2"];
for(i=0;i<selectedItems.length;i++)
{
var t = d.find(x => x.text === selectedItems[i]);
if(t!=undefined)
{
val.push(t.value);
}
}
// set the value of the multiselect.
multiselect.value(val);
</script>
Related
I need to add the value of a variable to the value of the option.
Option values are redeemed through a spreadsheet in Google Docs.
PROJECT ONLINE
spreadsheet with values
I'm using the code below to retrieve the values:
//Add value with fee
$(document).ready(function() {
var sheetURL ="https://spreadsheets.google.com/feeds/list/1J0qyxUCCkvcFGZ6EIy9nDOgEuTlpI5ICVG3ZsBd_H-I/1/public/values?alt=json";
$.getJSON(sheetURL, function(data) {
var entryData = data.feed.entry;
console.log(data);
jQuery.each(entryData, function() {
$("#totalSumWithFee").append(
'<option hidden="hidden" selected="selected" value="default">Choice</option><option value="' + this.gsx$values.$t + '">' + this.gsx$names.$t + '</option>'
);
});
});
});
This part is working. So, I tried to add the following code:
//new code
var valueSelectedFee = $('#totalSumWithFee :selected').val();
var cart = 10;
var cartWithFee = cart + valueSelectedFee;
$('.total-sum').html(cartWithFee.toFixed(2));
But NaN value is returning. Below is the HTML:
<strong>Total: $ <span class="total-sum"></span></strong>
<br><br>
<select style="width: 200px;" id="totalSumWithFee"></select>
How could I use the option values without returning the NaN value?
Because your initial code sets the first "Choice" option as the "selected" option, whose value is "default" (which is not a number), the line in the second section of code:
var cartWithFee = cart + valueSelectedFee;
is trying to set "cartWithFee" to 10 + "default", adding a string to a number, which doesn't work. If you change that line to:
var cartWithFee = cart + (isNaN(valueSelectedFee) ? 0 : valueSelectedFee);
then it will replace any NaN values (like "default") to 0, and should work correctly.
I have a dropdown where I am filling the content with dynamic data and in the model I am appending my data to the dropdown
$("#dpp").append($("<option disabled></option>").val(0).html('Select Locations'));
$("#dpp").append($("<option selected='selected'></option>").val(1111).html('All'));
for (var i = 0; i < Location.length; i++) {
$("#dpp").append($("<option></option>").val(data[i].sno).html(data[i].name));
}
I am unable to get the value and text of the selected option by using a change handler.
I tried:
$('#dpp').change(function () {
var thisvalue = $(this + "option:selected").text();
alert(thisvalue);
});
and by default on page load All option selected in the dropdown.
How can I get that value or text and show it on the label?
For change event and document ready:
$(document).ready(function() {
getSelectData($('#dpp'));
});
$('#dpp').on('change', function() {
getSelectData($(this));
});
function getSelectData(el) {
var $option = el.find('option:selected');
var text = $option.text();
var val = $option.val();
alert('option text: ' + text + '; option value ' + val)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="name" id="dpp">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Use the below code for both purposes (on page load as well as on change event)
$(document).ready(function() {
var dppText= $("#dpp option:selected").text(); // to get text on page load
//to get text on change of drop-down
$(document).on('change','#dpp',function(){
var thisvalue = $(this + "option:selected").text();
alert(thisvalue);
});
});
You can use this:
$(document).on('change','#dpp',function(){
var thisvalue = $(this + "option:selected").text();
alert(thisvalue);
});
This will add change listener to the document level so you will be able to detect the change on dpp.
This will do it:
$("#dpp option:selected").val();
I have multiple features that have multiple options that need to be updated when an option is selected. I also need to pass a third piece of data through the attribute element.
.getElementById() works for a single dropdown menu, but how do I get it to work when there are multiple menus on the page?
I have tried var e = document.getElementsByClassName("testClass"); which did not work.
I also tried to create optionsText & optionsValue in the same way that optionsFtr is created with var optionsValue = $('option:selected', this).value; and that didn't work either.
http://jsfiddle.net/8awqLek4/4/
HTML Code
<ul>
<li>
<div class="ftrsTitle">BODY</div>
<select class="testClass" id="testId">
<option>Select</option>
<option ftr="bod" value="blk">Black</option>
<option ftr="bod" value="grn">Kelly Green</option>
<option ftr="bod" value="red">Red</option>
<option ftr="bod" value="roy">Royal</option>
</select>
</li>
<li>
<div class="ftrsTitle">TRIM</div>
<select class="testClass">
<option>Select</option>
<option ftr="trm" value="blk">Black</option>
<option ftr="trm" value="grn">Kelly Green</option>
<option ftr="trm" value="red">Red</option>
<option ftr="trm" value="roy">Royal</option>
</select>
</li>
</ul>
<div id="vars"></div>
Javascript Code
$(document).ready(function () {
$("select").on('change', function () {
var e = document.getElementById("testId");
var optionsText = e.options[e.selectedIndex].text;
var optionsValue = e.options[e.selectedIndex].value;
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
});
To read select value you can simply use $(this).val(). To get selected option label you should use text() method.
Fixed code looks like this:
$("select").on('change', function () {
var optionsText = $('option:selected', this).text();
var optionsValue = $(this).val();
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
Demo: http://jsfiddle.net/8awqLek4/3/
This should do it:
$(document).ready(function(){
$("select").on('change', function(){
var e = $(this).find("option:selected");
$("#vars").html("<p>optionsText: " + e.text() + "</p><p>optionsValue: " + $(this).val() + "</p><p>optionsFtr: " + e.attr("ftr") + "</p>");
});
});
use the this keyword. Than you can access the select targeted, and with find in combination with the :selected selector you can find the option element currently selected.
http://jsfiddle.net/8awqLek4/5/
I currently have this here working..
$(document).ready(function() {
$("#image").change(function() {
$("#imagePreview").empty();
$("#imagePreview").append("<img src=\"" + $("#image").val() + "\" />");
});
});
<select name="image" id="image" class="inputbox" size="1">
<option value="imageall.jpg" selected> - All - </option>
<option value="image1.jpg">image1.jpg</option>
<option value="image2.jpg">image2.jpg</option>
<option value="image3.jpg">image3.jpg</option>
</select>
<div id="imagePreview">
</div>
from this previous question:
Previous Question
I was wondering how can I populate the from a jQuery Array instead?
How could I do that? So basically the values and name from an array
This is the example in Fiddle i will be using Example Working
function populateSelect(el, items) {
el.options.length = 0;
if (items.length > 0)
el.options[0] = new Option('please select', '');
$.each(items, function () {
el.options[el.options.length] = new Option(this.name, this.value);
});
}
As seen here:
Using javascript and jquery, to populate related select boxes with array structure
You may want to retrieve names and values from JSON array this way.
var image_maps = {image1: "image1.jpg", image2: "image2.jpg"};
$.each(image_maps , function(name, value) {
alert("name: " + name + " value: " + value);
});
Say I have a ListBox populated with a name value pair SelectList(myUsers, "Key", "Value"):
#Html.ListBox("ListReviewers", (SelectList)ViewBag.ListOFReviewers, new { style = "width:120px;" })
I want to double click an option in this ListBox, and place it in a SelectionList like below:
<div class="selectedEmployees">
<select class="selectionList" multiple="multiple" name="AssignedReviewer" style="width:120px;">
<!--x.UserID, x.FirstName + " " + x.LastName) -->
<option value=""></option>
</select>
</div>
Once this collection is placed in the above, I want to store all the values in another SelectionList Collection for later use.
Here is the start of my jQuery code:
<script type="text/javascript">
$('#ListReviewers').dblclick(function (i, selected) {
//double click on this value of listbox of type SelectList(myUsers, "Key", "Value")
//store this value and text
var value = $(this).val;
//var empName = $(this).data[0];
var empName = $(selected).text();
alert(empName);
//append an option element <option value=""></option>
$('.selectionList').append('<option id="' + value + '">' + empName + '</option>');
});
I can get the value of the dblclicked collection object, but not the text of the collection object. Is there a better way to do this?
Try attaching your event to the option within the select itself. You can then use this to access it's properties.
$('#ListReviewers option').dblclick(function () {
var value = $(this).val();
var empName = $(this).text();
$('.selectionList').append('<option id="' + value + '">' + empName + '</option>');
});
Alternatively, you can use clone() and append() to move the option from one select to the other. This will save you having to worry about duplicate options being appended.
$('#ListReviewers option').dblclick(function () {
var $newOptions = $(this).clone(false);
$(this).remove();
$('.selectionList').append($newOption);
});