Expand my Community achievements bar.

SOLVED

unable to fetch dropdown value correctly

Avatar

Level 6

I have a component in which i have a multifield item. In each multifield item i have separate containers. In of the containers i have a dropdown. I am trying to fetch the selected value of the dropdown, but i am only getting select as the value with the below code. Whereas if use this code in other components having multifield and dropdown directly as an item in the multifield then i am getting the correct value.

My component1-->Tab(Data)-->multifield item1-->container(list)-->container(button)-->dropdown (below code doesn't work).

My component2-->Tab(Data)-->multifield item1-->container(list)-->dropdown (below code works).

console.log("text.js");
(function ($, document, ns) {
$(document).on("dialog-ready", function() {
$(".coral3-Multifield-item").each(function( index ) {
let dropdown = $(this).find(".cq-dialog-dropdown-showhide-multi")[0].selectedItem.value;
console.log(ctaDropdown); //prints "select" all the time.

}) });
})(Granite.$, document, Granite.author);

below is the dropdown property for both comp1 and comp2

Screenshot (192).png

Do I need modify my loop because of the extra container/nesting of container?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Shaheena_Sheikh 

 

Can you please put the dialog structure here for the below use case?

My component1-->Tab(Data)-->multifield item1-->container(list)-->container(button)-->dropdown (below code doesn't work).

 

Just want to ensure that I am following the correct structure.

 

Thanks!

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @Shaheena_Sheikh 

 

Can you please put the dialog structure here for the below use case?

My component1-->Tab(Data)-->multifield item1-->container(list)-->container(button)-->dropdown (below code doesn't work).

 

Just want to ensure that I am following the correct structure.

 

Thanks!

Avatar

Community Advisor

Update:

 

@Shaheena_Sheikh 

 

I just tried with the below structure and it works for me and prints the requried values:

 

asutosh_j3_0-1618583923403.png

asutosh_j3_1-1618584075566.png

asutosh_j3_2-1618584118252.png

asutosh_j3_3-1618584163628.png

 

Both the use case works with same piece of code. Just ensure you do not have the default value as "select" else it will show the same value always until unless you change the value in dropdown.

 

(function ($, document, ns) {
$(document).on("dialog-ready", function () {
$(".coral3-Multifield-item").each(function (index) {
let dropdown = $(this).find(".cq-dialog-dropdown-showhide-multi")[0].selectedItem.value;
console.log(dropdown);
})
});
})(Granite.$, document, Granite.author);

 

Let me know if I am using wrong structure. Also please see the highlighted section above in code. It looks like you are using a different variable to store the data and retrieving from a different one.

 

Thanks!

Avatar

Community Advisor

@Shaheena_Sheikh 

Is granite:class property value(cq-dialog-dropdown-showhide-multi) same for both select fields?