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.
Just like value & selected index, a selectedText would be amaazing.
$( "#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;
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.
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?
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.
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
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.
@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.
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" }]
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.