Get Selected Text from Select Control

Feature Request
1

Hi.
I have found my self using the where functions a lot of times when I need to access the text part of a dynamically bound select html control.
When we select something in the list based on text, the value part is usually an id. And this is the same that is returned when we use select1.value.

In many cases, I find that I have some other part of the page where I need to show the text part of the selected item in select control.
To do this, I use where on the original binding source server connect/array with == operator on select1.value. eg: scListItem.data.query1.where(id, select1.value, "==")[0].name.
Selected index could also be used, but sorting at binding time might lead to incorrect output.

Having a direct “Wappler” option to get SelectedText would be a great option to have.
image

Just like value & selected index, a selectedText would be amaazing.

2

yes, I needed it a few days ago too. With the solution below you can manage it until it is added to the wappler

<select id="myselect">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

$( "#myselect option:selected" ).text();
Result :  "Mr"

with Pure javascript

var e = document.getElementById("selectElementID");
var value=e.options[e.selectedIndex].value;// get selected option value
var text=e.options[e.selectedIndex].text;
3 Likes
3

Thanks for the input Serhat. :slightly_smiling_face:
JS solutions are great, but having it in Wappler is better.

4

of course .. always :grinning: :+1:

5

I actually just found myself looking for this today. I needed to input the selected text from a selection dropdown into a text input further down the form.

6

@patrick , @George

I know it’s a simple feature but very useful and we use it very often.
Thanks to this feature, we do not have to create a query to show the selected option on the screen.
If possible, is it possible to add this simple feature to the wappler?

1 Like
7

Agreed. I have commonly needed this and had to code jQuery/Javascript to achieve it. Wappler native option would be brilliant!

1 Like
8

I also needed this recently. In this case, the selected item ran a query and the text value was needed to appear as a heading on the results page. I expect this is a common example. It would be very useful if it were an option in Wappler.

1 Like
9

This custom formatter works very well. You can use it until Wappler adds it. Of course, it will be much more comfortable to use with the interface :slight_smile:

 dmx.Formatters('string', {
    selectedText: function(val) {
    var e = document.getElementById(val);
    var text=e.options[e.selectedIndex].text;
    return text; 
  }
});

Example Usage :
Be sure to use the ID used for the selectbox.

{{'selectbox_id'.selectedText()}}
3 Likes
10

Bump.

Serhat’s solution looks good. Maybe that could be added in Wappler natively?

2 Likes
11

@patrick I also vote for adding “selectedText” to the select html control.

Thanks
Allan

12

I’ve added the selectedValue and selectedText as extra properties to the select control.

Here the update. It is like the selectedIndex, but returns the text/value of the option.

dmxAppConnect.zip (24.6 KB)

4 Likes
13

@patrick Just tested this out. For a multi-select, its returning just the first value. Can you please check?
Actually, selected index & value also just return the first value. Only value returns correct array of items for mult-select.

14

Yes, that is the default behavior for multi select. It uses the selectedIndex to get the text of the option.

15

Oh. Understood.
Can the Wappler options be modified to be smarter? Rather than using the default.

16

What would you like to have returned. The select has an selectedOptions property which I could add with the options normalized to objects with label and value. It would then return an array like [{ "label": "Mr", "value": "1" }]

17

That would make sense.
But for selectedText, and array of text would be expected… Similar to array of values returned for value property.
One could use formatters to get a list of labels from selectedOptions as well, but would be better I think, performance wise, if such list would be available directly in selectedText.

18

This has been added to Wappler some time ago.

1 Like