how to read Extjs dropdown value | Community
Skip to main content
S
Sam205505050
New Participant
October 16, 2015
Solved

how to read Extjs dropdown value

  • October 16, 2015
  • 1 reply
  • 892 views

I've written a listner on a button action which adds dynamic dropdown in my dialog -

    name : './groupinfo'+count,id : 'groupinfo'+count,xtype : 'selection',type : 'select',emptyText:'Select a group...',options : '/bin/groupinfo/options.json' ,fieldLabel : 'Group',width:200

options.json sends info in the folloing pattern - [{"text":"Value1","value":"val1"},{"text":"Value2","value":"val2"},{"text":"Value3","value":"val3"}] and dropdown values are showing properly.

Now I want to read the selected value in my js file. So, I have written like below but the value is coming as undefined-

      var dropdownVal = document.getElementById("groupinfo"+i).value;

Now, I have tried this which gives me blank value when I select -

var value1 = $('#groupinfo'+i+' option:selected').text(); alert(value1);var value2 =  $('#groupinfo'+i).val(); alert(value2);

When I tried to get the value from dynamically created text box then I can get the value by using getElementById().value but it is not working for dynamically created dropdown. Please advice!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

You can use the ExtJS API: Since you are using ExtJS to create the dropdown, it's recommended to use the ExtJS API to retrieve the selected value. You can access the value using the getValue() method of the ExtJS component. Here's how you can do it:

 

javascript

var dropdown = CQ.Ext.getCmp('groupinfo' + i);
var selectedValue = dropdown.getValue();

 

Using jQuery: If you prefer using jQuery to read the selected value, make sure you use the correct syntax. For dynamically created dropdowns, it's important to use the appropriate event delegation to access the value. Here's an example:

 

Jquery

$(document).on('change', '#groupinfo' + i, function() {
var selectedText = $('#groupinfo' + i + ' option:selected').text();
var selectedValue = $('#groupinfo' + i).val();
alert('Selected Text: ' + selectedText + ', Selected Value: ' + selectedValue);
});

1 reply

BrianKasingli
BrianKasingliAccepted solution
New Participant
July 21, 2023

You can use the ExtJS API: Since you are using ExtJS to create the dropdown, it's recommended to use the ExtJS API to retrieve the selected value. You can access the value using the getValue() method of the ExtJS component. Here's how you can do it:

 

javascript

var dropdown = CQ.Ext.getCmp('groupinfo' + i);
var selectedValue = dropdown.getValue();

 

Using jQuery: If you prefer using jQuery to read the selected value, make sure you use the correct syntax. For dynamically created dropdowns, it's important to use the appropriate event delegation to access the value. Here's an example:

 

Jquery

$(document).on('change', '#groupinfo' + i, function() {
var selectedText = $('#groupinfo' + i + ' option:selected').text();
var selectedValue = $('#groupinfo' + i).val();
alert('Selected Text: ' + selectedText + ', Selected Value: ' + selectedValue);
});
    Terms & ConditionsAccessibility statement

    Loading footer...