/    Sign up×
Community /Pin to ProfileBookmark

How to get dropdown option text?

Copy linkTweet thisAlerts:
Dec 08.2016

could you please help me to get Car names instead of its option numbers?

<!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id=”mySelect” onchange=”myFunction()”>
<option value=”1″>Audi
<option value=”2″>BMW
<option value=”3″>Mercedes
<option value=”4″>Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id=”demo”></p>

<script>
function myFunction() {
var x = document.getElementById(“mySelect”).value;
document.getElementById(“demo”).innerHTML = “You selected: ” + x;
}

</script>
</body>
</html>

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@rootDec 08.2016 — 
  • 1. when posting code, please use BBCode tags

  • 2. you headed your post as JQuery but no JQuery is contained in your JavaScript.

  • 3. a select is part of a HTML web form.

  • 4. accessing select elements is done using JavaScripts DOM method.


    • &lt;select id="mySelect" onchange="myFunction()"&gt; to
    &lt;select name="mySelect" onchange="myFunction( this )"&gt;
    &lt;option value="0" selected&gt;Please Select     and add in an additional select that is selected first

    and function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
    }     to function myFunction( sel ) {
    var x = sel.options[sel.selectedIndex].text;
    document.getElementById("demo").innerHTML = (sel.selectedIndex&gt;0) ? "You selected: " + x : "";
    }
    You can easily find the proper way to access form elements online, the problem is that you need to filter out all the poor examples that uses short cuts that are poor programming examples and you really should use a <form> and avoid using id="" attributes and use name="" attributes for form elements.
    Copy linkTweet thisAlerts:
    @TobiasParentDec 12.2016 — Or, as you have tagged this as a jQuery thread, take a look at the jquery [B]val()[/B] function.

    ... And in setting up a fiddle to show you how, I realised your value="foo" in your selects actually breaks the .val() function. Oops. Fortunately, as was often the case with perl (yeah, I'm **THAT** old), [B]TIMTOWTDI[/B]. I set up a [B]fiddle [/B]for you, that will allow you to see both approaches: jQuery's .val() function (which works as long as you don't assign an implicit value attribute) and using the option:selected pseudo-selector with the .text() function.

    Hope it helps!
    Copy linkTweet thisAlerts:
    @rootDec 13.2016 — Or, as you have tagged this as a jQuery thread, take a look at the jquery [B]val()[/B] function.

    ... And in setting up a fiddle to show you how, I realised your value="foo" in your selects actually breaks the .val() function. Oops. Fortunately, as was often the case with perl (yeah, I'm **THAT** old), [B]TIMTOWTDI[/B]. I set up a [B]fiddle [/B]for you, that will allow you to see both approaches: jQuery's .val() function (which works as long as you don't assign an implicit value attribute) and using the option:selected pseudo-selector with the .text() function.

    Hope it helps![/QUOTE]

    It is tagged as being JQuery with no JQuery in sight, hence my comment, many people mistake JQuery as being JavaScript, not that I advocate its use in any case.
    ×

    Success!

    Help @sreekhosh spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.7,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...