Can anyone let me know how can we change the value of kendo combobox dynamically.
Fiddle is here - http://jsfiddle.net/ashwyn/yL6w3/1/
In the above fiddle, when we click on click then the shown value should be changed to three (for eg.)
I found this link which list all datasource methods -
http://www.kendoui.com/documentation/framework/datasource/methods.aspx
If you know the value you want, you can also do:
$("#MyComboBox").data("kendoComboBox").value(id);
working demo http://jsfiddle.net/Bxsge/2/ or http://jsfiddle.net/Bxsge/1/ (behavior for demo when you will click on the link the select will change to three selected value.)
selects by jQuery object // selects by index combobox.select(1); // selects item
link: http://www.kendoui.com/documentation/ui-widgets/combobox/methods.aspx
Hope this helps, :)
code
$(function(){
var CB = $("select").kendoComboBox();
$("a").click(function(){
var $cbx = $("select").data("kendoComboBox")
$cbx.select(2);
});
});
Related
I'm attempting to highlight 1 or more items in a select box in a unit test. I'm using Karma, Jasmine, and PhantomJS, AngularJS, JQLite, CoffeeScript.
My list has items ["banana", "apple", "orange"].
I tried setting the value directly:
sourceList = element.find('select').eq(1)
sourceList.val("[banana]").triggerHandler('change');
// Or
sourceList.val("banana").triggerHandler('change');
When I get sourceList.val() it's not set.
I tried triggering events to select it. Note I can't do a "click" event because I have another event fire on click.
sourceList.find('option').eq(0).triggerHandler("active");
sourceList.find('option').eq(0).triggerHandler("focus");
sourceList.find('option').eq(0).triggerHandler("drag");
sourceList.find('option').eq(0).triggerHandler("dragLeave");
I tried using the selectedIndex
sourceList.selectedIndex = 1
None of those seem to highlight or select the item. I'm out of ideas. Has anyone accomplished this?
Here is the method of the directive which I am trying to test:
// Clicks on the add button. Should take all items highlighted and move them over
$scope.add = function(){
var sourceList = $element.find('select').eq(1);
angular.forEach(sourceList.val(), function(val, index){
$scope.selected.push({
text: val
});
});
checkListDupes();
};
This code works when I do it manually in the browser but I can't seem to get my test to highlight some items in the select box before clicking the add button. So when this code executes sourceList.val() is equal to [].
A bit late to the party, but I'll leave it here for anyone else with the same problem.
I don't know how you've built the options for the select box but sourceList.val("banana").triggerHandler('change');
should work fine as long as the value of the option is banana. If you haven't specified a track by on the ng-options, the default values that angular creates will be 'string:'+<option label> so sourceList.val('string:banana').triggerHandler('change'); should do the trick.
I m using kendo UI dropdownlist. But solutions for standard select element can help too.
I had tried
$('select:not(aria-expanded)')
$('select:not(aria-expanded=true)') // syntax error
$('select:not(expanded)')
$('select:not([aria-expanded=true])')
$('select:not([expanded=true])')
none of these work correct.
Thanks
You need to wrap the attribute inside square brackets [ ]:
$('select:not([aria-expanded=true])')
If you are asking about how to focus on the select dropdown list then use the methods that are apart of the api for the dropdown list.
<script>
$("#dropdownlist").kendoDropDownList();
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.focus();
</script>
update
Here is how you get the value of a Kendo dropdownlist using jquery:
<script>
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
var value = dropdownlist.value();
</script>
I want to fetch the selected option from dropdown. I know I can get selected option with jQuery(dropdown).val(). But I am not able fetch the selected with the 'val' function.
Am I doing anything wrong here?
Just use this:
var selectedValue = $('.daterange-preset').val();
(Note: I was able to see your code and get your class name by zooming in, but in the future please post the code rather than a screenshot.)
try using .on( "change" and then finding the option where selected has been applied. I have attached a jsfiddle with a working example that will alert you the value of the selected option everytime you change it.
$('.datarange-preset').on( "change", function(){
var datarangeSelected = $('.datarange-preset').find(":selected").val();
alert(datarangeSelected);
});
http://jsfiddle.net/g8hVA/
I figured out the issue. In my code at one place dropdown value was getting set with the null.
$daterangePreset.val(someVarialwithNullValue);
Because the value was getting set with null. I don't see any update in the HTML. HTML still shows one of the option as 'selected'. So when I was trying to get the selected value with following syntax it was always returning null.
$daterangePreset.val();
You can use a variant of:
var text = $("option:selected").text();
var value = $("option:selected").val();
I have two listbox, A & B:
when I double click on an item of A , the item will be added in List B. And i have done this. List B visually show the value, but when I go to the view source of the page, I dont see new <option>.
This is my List A options.
This is my List B options (before and after addition and it remains same whatever items added. this is my problem.):
It should have one <option>. like
<option value="VSNR">VSNR</option>
what is my code is :
$('#lstXLSCol').on('dblclick', function () {
var item = $('#lstXLSCol').find(":selected").text();
var newOption = { item: item };
$('option:selected', this).remove();
$.each(newOption, function (val, text) {
if (text != "")
$('#lstXLSSelectedCol').append(new Option(text, val));
});
});
EDIT 1 :
I have found it pressing F12 in IE. but the values are like below:
but, i wanted to insert the value same as text. What should be changed in my jquery code?
you can not see them. The source is just used to build the initial DOM that represents the document. Dynamically created elements are only inserted in the DOM.
But you can analyse such elements with a DOM viewer like Safari’s WebInspector or the Firefox extionsion Firebug. Firefox can also show source code that represents such dynamically created elements by selecting that element an choosing View Selection Source in the context menu.
See this
take out the space between params and :last
$('#lstXLSSelectedCol:last').html('<option value=\''+item+'\'>'+item+'</option><option>');
$('#lstXLSSelectedCol:last').live('change', function () {
var option_selected = $('option:selected', this).val();
$('#lstXLSSelectedCol:last').append($('<option>', {
value: option_selected
}).text(option_selected));
});
You won't see dynamically added elements in the source of your page.
Use your browser's console to inspect the DOM.
Normally it's enough to right click on the element and select "inspect" from the context menu, otherwise see this link for how to access your browser's console.
I have a dropdown box that has a list of institutions in it. Now if I manually select an option, it works and I am able to grab the correct value.
However, I have a select rates button which uses JavaScript to pull up a rate sheet. You select a rate from that sheet and it will select an option from the dropdown for you (one that corresponds with the rate from the rate sheet). If I use this method, it doesn't trigger a .change() therefor I can't get a value for the selected option.
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").text()
$("fi").text(value);
});
Any suggestions? I have tried .change() and .click() but nothing.
Once you are in the change function you don't have to do another search or selector because you already have the object you just have to find the selected option from it. So you can try this:
$('#id_financial_institution').change(function () {
var value = $(this).find("option:selected").text();
$("fi").text(value);
});
If the code still doesn't return you answer start to add alerts at each point to see where you are and what values you have and work your way from there?
Rather than .text() use .val()
$(function() {
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").val()
alert(value);
});
})
Here is a sample demo, without your html. I am just alerting the value.
DEMO
You're going about this all wrong. You already have the select element in this, all you need is the value of that select element.
$('#id_financial_institution').change(function () {
var value = $(this).val();
$('#fi').text(value); //i assume `fi` is an [id]
//do more stuff
});
I went inside my AJAX call and got the value of the fields I needed there. For some reason, when using the AJAX call, it wouldn't fire the .change() on that particular field.
Thanks for all your input everyone.