I have several WebDropDowns on my page. When the user clicks the dropdown to view the list, I need to display each item's text. When they select an item, I need to display the selected value, rather than the selected text, as the selected item in the dropdown list. Is this possible?
Hello Jesse,
Thank you for the details shared. It seems you do not require to do post-back and a client side approach fits well.
In order to close the WebDropDown when a selection is made, it is possible to either set EnableClosingDropDownOnSelect property to true Like: EnableClosingDropDownOnSelect="true" OR as an alternative close it manually in the WebDropDown1_SelectionChanged event handler like adding sender.closeDropDown(); at the end of the function.
As an alternative to your approach, you could use the following:
function WebDropDown1_SelectionChanging(sender, eventArgs) { var actItem = sender.get_activeItem(); var value = actItem.get_value(); sender.get_activeItem().set_text(value); }
Here, sender.get_activeItem() will return the same object as the one when using eventArgs.get_value()[0]
It seems this will be sufficient for you to fulfill the requirements. Please let me know if you require further assistance with this.
Looks like we were both looking into similar alternatives. I found a way to make this work, but it seems a bit ugly to me:
function wddTerms_SelectionChanging(sender, e) { e.get_value()[0].set_text(e.get_value()[0].get_value()); }
Trying out your code, it kept adding the values to the dropdown list, rather than just setting the display value. And for some reason my dropdown list wasn't closing until I clicked somewhere else on the page. I think I'll stick with my way since it's working.
Hello,
I have further investigated the possible approach and I suggest a client side alternative for visualization purposes only. It suggests handling SelectionChanging event.
<script type="text/javascript" id="igClientScript">
function WebDropDown1_SelectionChanging(sender, eventArgs) {
var ActItem = sender.get_activeItem();
var value = ActItem.get_value();
var elem = ActItem._element
elem.innerText = value;
sender.closeDropDown(); }
You could refer to the attached code sample for details.
It seems like you still don't understand what I'm asking for. I will try and explain this as simply and with as much detail as I can. When you click on a dropdown list to open it, a list of text displays. Each of those text items has a text and a value. When you select one of the items, the dropdown list closes and the text is displayed as the dropdown's text.
Instead of the selected text displaying, I need the selected value displayed. Then when they reopen the dropdown, I need it to still display the same text list. I am not changing any of the list items - I just need to change what is displayed when an item is selected and the dropdown is closed.
Also, not sure if this changes what needs to be done, but the dropdown is in an update panel.
When I select an item, it still shows the selected text in the text box instead of the selected value. If open the dropdown list and select an item a second time, it will then display the value in the text box. Is there really no way to avoid this?