Showing different text on dropdown selection vs dropdown options The Next CEO of Stack OverflowjQuery get specific option tag textHow can I know which radio button is selected via jQuery?How do I give text or an image a transparent background using CSS?Get selected text from a drop-down list (select box) using jQueryHow to style a <select> dropdown with only CSS?How do I vertically center text with CSS?How to make Twitter Bootstrap menu dropdown on hover rather than clickjQuery Get Selected Option From DropdownChanging Text into dropdownBinding select element to object in Angular
Which tube will fit a -(700 x 25c) wheel?
Anatomically Correct Strange Women In Ponds Distributing Swords
Which kind of appliances can one connect to electric sockets located in an airplane's toilet?
Why has the US not been more assertive in confronting Russia in recent years?
Is "for causing autism in X" grammatical?
Why do professional authors make "consistency" mistakes? And how to avoid them?
Is it my responsibility to learn a new technology in my own time my employer wants to implement?
Is it possible to search for a directory/file combination?
Won the lottery - how do I keep the money?
sp_blitzCache results Memory grants
Unreliable Magic - Is it worth it?
Should I tutor a student who I know has cheated on their homework?
Sending manuscript to multiple publishers
What is "(CFMCC)" on an ILS approach chart?
Why does the UK parliament need a vote on the political declaration?
Is 'diverse range' a pleonastic phrase?
How do I transpose the first and deepest levels of an arbitrarily nested array?
Received an invoice from my ex-employer billing me for training; how to handle?
Interfacing a button to MCU (and PC) with 50m long cable
What benefits would be gained by using human laborers instead of drones in deep sea mining?
Is it ever safe to open a suspicious html file (e.g. email attachment)?
Why do remote companies require working in the US?
Would this house-rule that treats advantage as a +1 to the roll instead (and disadvantage as -1) and allows them to stack be balanced?
If/When UK leaves the EU, can a future goverment conduct a referendum to join the EU?
Showing different text on dropdown selection vs dropdown options
The Next CEO of Stack OverflowjQuery get specific option tag textHow can I know which radio button is selected via jQuery?How do I give text or an image a transparent background using CSS?Get selected text from a drop-down list (select box) using jQueryHow to style a <select> dropdown with only CSS?How do I vertically center text with CSS?How to make Twitter Bootstrap menu dropdown on hover rather than clickjQuery Get Selected Option From DropdownChanging Text into dropdownBinding select element to object in Angular
I have a requirement where my drop-down values in my select are an expanded div which has 3 lines. For example my options Could be something like below
Honda Accord
19'
Blue
--------------
Honda Civic
17'
Red
This is what my dropdown would look like when expanded. So instead of regular one line option I have a div with more detailed options. The challenge I am facing is when making my selection (I can correctly display the grid as above) my dropdown selection value shows as the context of the whole div. So for example my dropdown after selection would look like this.
[Honda Civic17'Red]
I am using Angular Material for my dropdown. Is anyone aware of a way to set the selection to another value than the option text? For example I would like my dropdown when selected to display [Honda Civic] instead of [Honda Covic17'Red].
Any help would be appreciated.
Thank you.
html
angular drop-down-menu angular-material edited Mar 8 at 15:46
k97513
1,450616
asked Mar 8 at 14:37
Maxi PereyraMaxi Pereyra
277
add a comment |
I have a requirement where my drop-down values in my select are an expanded div which has 3 lines. For example my options Could be something like below
Honda Accord
19'
Blue
--------------
Honda Civic
17'
Red
This is what my dropdown would look like when expanded. So instead of regular one line option I have a div with more detailed options. The challenge I am facing is when making my selection (I can correctly display the grid as above) my dropdown selection value shows as the context of the whole div. So for example my dropdown after selection would look like this.
[Honda Civic17'Red]
I am using Angular Material for my dropdown. Is anyone aware of a way to set the selection to another value than the option text? For example I would like my dropdown when selected to display [Honda Civic] instead of [Honda Covic17'Red].
Any help would be appreciated.
Thank you.
html
angular drop-down-menu angular-material edited Mar 8 at 15:46
k97513
1,450616
asked Mar 8 at 14:37
Maxi PereyraMaxi Pereyra
277
Could you post some code?
– k97513
Mar 8 at 15:24
add a comment |
I have a requirement where my drop-down values in my select are an expanded div which has 3 lines. For example my options Could be something like below
Honda Accord
19'
Blue
--------------
Honda Civic
17'
Red
This is what my dropdown would look like when expanded. So instead of regular one line option I have a div with more detailed options. The challenge I am facing is when making my selection (I can correctly display the grid as above) my dropdown selection value shows as the context of the whole div. So for example my dropdown after selection would look like this.
[Honda Civic17'Red]
I am using Angular Material for my dropdown. Is anyone aware of a way to set the selection to another value than the option text? For example I would like my dropdown when selected to display [Honda Civic] instead of [Honda Covic17'Red].
Any help would be appreciated.
Thank you.
html
angular drop-down-menu angular-material edited Mar 8 at 15:46
k97513
1,450616
asked Mar 8 at 14:37
Maxi PereyraMaxi Pereyra
277
I have a requirement where my drop-down values in my select are an expanded div which has 3 lines. For example my options Could be something like below
Honda Accord
19'
Blue
--------------
Honda Civic
17'
Red
This is what my dropdown would look like when expanded. So instead of regular one line option I have a div with more detailed options. The challenge I am facing is when making my selection (I can correctly display the grid as above) my dropdown selection value shows as the context of the whole div. So for example my dropdown after selection would look like this.
[Honda Civic17'Red]
I am using Angular Material for my dropdown. Is anyone aware of a way to set the selection to another value than the option text? For example I would like my dropdown when selected to display [Honda Civic] instead of [Honda Covic17'Red].
Any help would be appreciated.
Thank you.
html
angular drop-down-menu angular-material html
angular drop-down-menu angular-material edited Mar 8 at 15:46
k97513
1,450616
asked Mar 8 at 14:37
Maxi PereyraMaxi Pereyra
277
edited Mar 8 at 15:46
k97513
1,450616
asked Mar 8 at 14:37
Maxi PereyraMaxi Pereyra
277
edited Mar 8 at 15:46
k97513
1,450616
edited Mar 8 at 15:46
k97513
1,450616
edited Mar 8 at 15:46
k97513
1,450616
1,450616
asked Mar 8 at 14:37
Maxi PereyraMaxi Pereyra
277
asked Mar 8 at 14:37
Maxi PereyraMaxi Pereyra
277
asked Mar 8 at 14:37
Maxi PereyraMaxi Pereyra
277
277
Could you post some code?
– k97513
Mar 8 at 15:24
add a comment |
Could you post some code?
– k97513
Mar 8 at 15:24
Could you post some code?
– k97513
Mar 8 at 15:24
Could you post some code?
– k97513
Mar 8 at 15:24
add a comment |
1 Answer
1
active
oldest
votes
You can customize the display of the selected item using MatSelectTrigger. An example is provided here: https://material.angular.io/components/select/overview#customizing-the-trigger-label.
answered Mar 8 at 15:31
G. TranterG. Tranter
5,3121625
Perfect! thank you. That is exactly what I was looking for.
– Maxi Pereyra
Mar 8 at 16:24
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55065408%2fshowing-different-text-on-dropdown-selection-vs-dropdown-options%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can customize the display of the selected item using MatSelectTrigger. An example is provided here: https://material.angular.io/components/select/overview#customizing-the-trigger-label.
answered Mar 8 at 15:31
G. TranterG. Tranter
5,3121625
Perfect! thank you. That is exactly what I was looking for.
– Maxi Pereyra
Mar 8 at 16:24
add a comment |
You can customize the display of the selected item using MatSelectTrigger. An example is provided here: https://material.angular.io/components/select/overview#customizing-the-trigger-label.
answered Mar 8 at 15:31
G. TranterG. Tranter
5,3121625
Perfect! thank you. That is exactly what I was looking for.
– Maxi Pereyra
Mar 8 at 16:24
add a comment |
You can customize the display of the selected item using MatSelectTrigger. An example is provided here: https://material.angular.io/components/select/overview#customizing-the-trigger-label.
answered Mar 8 at 15:31
G. TranterG. Tranter
5,3121625
You can customize the display of the selected item using MatSelectTrigger. An example is provided here: https://material.angular.io/components/select/overview#customizing-the-trigger-label.
answered Mar 8 at 15:31
G. TranterG. Tranter
5,3121625
answered Mar 8 at 15:31
G. TranterG. Tranter
5,3121625
answered Mar 8 at 15:31
G. TranterG. Tranter
5,3121625
answered Mar 8 at 15:31
G. TranterG. Tranter
5,3121625
5,3121625
Perfect! thank you. That is exactly what I was looking for.
– Maxi Pereyra
Mar 8 at 16:24
add a comment |
Perfect! thank you. That is exactly what I was looking for.
– Maxi Pereyra
Mar 8 at 16:24
Perfect! thank you. That is exactly what I was looking for.
– Maxi Pereyra
Mar 8 at 16:24
Perfect! thank you. That is exactly what I was looking for.
– Maxi Pereyra
Mar 8 at 16:24
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55065408%2fshowing-different-text-on-dropdown-selection-vs-dropdown-options%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you post some code?
– k97513
Mar 8 at 15:24