CODEWITHSUNDEEP
javascripthtmldrop-down-menu
user1551817
user1551817

Reputation: 7481

Generate text on a webpage which depends on dropdown box options

I have created a dropdown box with 3 options on my website.

I want to change some text on the webpage, depending on the drop-down item selected. For example:

If dropdown option 1 is chosen, I would like some text on the page that says "You have chosen option 1".

I don't know any JavaScript and so I haven't tried anything apart from trying to search for a similar solution.

<select name="os0" style="background: #315d80; color: #fff; border-color: white; border: 0px;">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
</select>

Upvotes: 0

Views: 355

Answers (2)

Jens Ingels
Jens Ingels

Reputation: 816

var e = document.querySelector('[name="os0"]');
var strUser = "";
e.addEventListener("change", function(){
    strUser = e.options[e.selectedIndex].innerHTML;
  alert("You have chosen " + strUser);
});

Upvotes: 1

CodeAt30
CodeAt30

Reputation: 884

Full sultion with jQuery (I started typing it before you added the HTML to your question so the options are italian car brands).

https://jsfiddle.net/mL2c2xb6/

HTML:

<select id="carSelect">
    <option></option>
    <option value="Audi">Audi</option>
    <option value="Ferrari">Ferrari</option>
    <option value="Fiat">Fiat</option>
</select>

<p id="choiceDisplay">
    Selection Display
</p>

Javascript:

$('select').change(function(){                // Listen to changes to <select> element
    const options = $("option");              // Get all the <option> elements.
    let selectedOption = "";                  // Var to store selected option value.
    options.each(function(index){             // Iterate  through option elements.
        let option = options[index];
        if($(option).prop("selected")) {      // Find the seletced one.
           selectedOption = $(option).val();  // Get the value and store it
        };
    });
    $("#choiceDisplay")
        .empty()
        .append(selectedOption);              // Display the result.
});

Upvotes: 1

Related Questions