select2 change selection programmatically - javascript

I've got a select2 selection that I'm trying to set the value for using javascript.
I've created a fiddle at this address.
https://jsfiddle.net/rfeynman/wn9v3bud/
I'm trying both he following
// method 1
$('#groupList').select2('data',{id:"group2", text:"group2"},true);
// method 2: as seen on the select2 website
var groupList = $('#groupList').select2();
$(groupList).val("group2").trigger("change");
My problem is that I'm unable to change the selection for a select2 input that loads data using ajax. Any idea what i'm doing wrong?

looks like this can be done using the following code. you need to add the option to the select list and then set the value.
var option=$("<option>").attr("value","group2").html("group2");
$("#groupList").append(option);
$("#groupList").val("group2").trigger("change");

Related

How to get selected values of all dynamically created multiple dropdowns using jquery

I have created dynamically row with drop-down list, i want to get all selected values from dropdowns of rows with JQuery. Please help me.
Since you haven't posed any code snippet, I'm just gonna wing it, assuming it's a standard <select>-box.
// Loop all parents and grab the value which is set by the browser whenever update occurs.
var values = [...document.querySelectorAll('select')].map(x =>x.value)

Set selection dropdown value in Javascript

I'm trying to set a value for a selection dropdown using javascript. Please see the pictures below. When I manually change the value of the dropdown list (by clicking), the timeline changes in accordance to the new value.
selection dropdown
timeline
When I do the following with javascript:
myDropdown.selectedIndex = 4;
The value is changed in the dropdown, but it doesn't update on the timeline. Is there any way to trigger this update?
I solved it by going through a huge javascript file.
What eventually worked was to call the dropdown change function with: $(".timeslotdrop").change();

Testing combobox developed using ExtJS with CasperJS

I have developed my application using ExtJs 4.1. I have a combobox which gets populated using Ajax call. Once the comobox is populated, I need to find an item by name and then first the select event for that item.
The problem is the way combo-box is rendered by ExtJS. I am not sure how to select an item in the right manner. CombBox is not really a <select> element but a text input with a detached drop-down list that's somewhere at the bottom of the document tree.
I do not want to hard code the id's as ExtJS randomly generate the id.
This is how the generated HTML looks
You can check the example of ExtJs combobox here
Without testing, I would suggest,
var x = require("casper").selectXPath;
casper.thenClick(".x-form-trigger.x-form-arrow-trigger")
.wait(100)
.thenClick(x("//li[contains(#class,'x-boundlist-item') and contains(text(),'Alaska')]"))
.wait(100, function(){
this.capture("screenshot.png");
});
You might also need to move the mouse into position before clicking. Use
casper.then(function(){
this.mouse.move(selector)
});
Since you have the ComboBox in a form, you could use the "name" property in the ComboBox definition and select it with:
Ext.getCmp("idOfThePanel").down('form').getForm().findField('name');
Another option, use the "reference" property. In this case I'm not sure which is the correct way to select the ComoBox:
Ext.getCmp("idOfThePanel").down('form').getForm().lookupReference('reference');
or
Ext.getCmp("idOfThePanel").lookupReference('reference');

How do I set a dropdown option by value using jquery?

I have a fiddle that has some slight demo code: http://jsfiddle.net/mwoods98/MHrJJ/
I have a request that is being sent via ajax and it's returning some values via JSON.
With that, I'm taking what is returned and filling in a form. I'm filling in the form
with the other values but I can't quite figure out how to set the dropdown to a value that is returned.
$('#PosTitle').find('option:eq(PosVar)').val().prop('selected', true);
I have tired this and it doesn't work. PosVar is a variable that I'm setting to a number that is returned from ajax.
UPDATE: Thanks for both of the answers, I have discovered something.
I'm using this code to make the drop downs look better but also I need a drop down that can have multimple lines of HTML.
http://www.marghoobsuleman.com/jquery-image-dropdown
When I remove this js, the form fills in.
I'm open to using another library that gives me the ability to use multiple rows in a select dropdown and pass HTML to it.
Thanks for the answers.
All you need is:
var PosVar = 9;
$('#PosTitle').val(PosVar);
jsFiddle example
Remove the .val()
$('#PosTitle').find('option:eq(PosVar)').prop('selected', true);
.val() will not return this object .. So you cannot chain it further..
jsFiddle

jQuery combobox setting default value after creation

I'm having a difficulty using the jQuery combobox widget as mentioned here:
I'm using jQuery to load the options for the select using ajax, which means that upon creation of the combobox, there are no options in it. When I get the values from the ajax call, I set the first option to be be selected. This works fine for the underlying select, but not for the input-field which jQuery combobox has added.
I've seen the solution here but this will not work if the options are added after _create is called(also, it is kinda outdated since the widget by default handles this).
As far as I can tell, there are no relationsship between the underlying combobox and the input-field that makes the one update the other. Or am i wrong here?
Regards,
Runar
ok..solved this myself adding the following code snippet in _create :
select.change(function() {
var selected = select.children( ":selected" );
input.val(selected.val() ? selected.text() : "");
});
Then invoked change on the combo after values had been populated.

Categories

Resources