JS code for text dependent on dropdown options

Question

I'm trying to add some JavaScript into my HTML for the first time.

Have made it this far from helpful replies on this forum; I have something that I think is close, but doesn't work:

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(){
        const options = $("option");
    let selectedOption = "";
    let displayString = "";
    options.each(function(index){
        let option = options[index];
      if($(option).prop("selected")) {
        selectedOption = $(option).val();
      };
      if(selecetedOption === "Audi") {
        displayString = "Oh I used to have one of those";
      };
    });
    $("#choiceDisplay").empty().append(displayString);
});

I have a jsfiddle link too.

Danziger · Accepted Answer · 2018-01-28 19:30:45Z

4

It looks like you just have a typo:

if (selecetedOption === "Audi") {

Anyway, you probably don't need that .each block to get the value from the <select>:

$("select").change((e) => {
  const value = e.target.value || '☝️ Please, select an option';
  const displayString = value === "Audi" ? "Audi - Oh I used to have one of those" : value;

  $("#choiceDisplay").empty().append(displayString);
});

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

<p id="choiceDisplay">☝️ Please, select an option.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jan 28, 2018 at 19:30

answered Jan 28, 2018 at 17:44

Danziger

21.4k6 gold badges59 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

HenryDev · Accepted Answer · 2018-01-28 17:58:07Z

2

How about this simple solution? Hope it helps!

$("select").change(function(){
  let displayString = "";
  let selectedOption = $('select[id="carSelect"]');
  displayString = (selectedOption.val() === "Audi") ? selectedOption.val() + " Oh I used to have one of those" : selectedOption.val();
  $("#choiceDisplay").empty().append(displayString);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

edited Jan 28, 2018 at 17:58

answered Jan 28, 2018 at 17:52

HenryDev

5,0136 gold badges31 silver badges70 bronze badges

Collectives™ on Stack Overflow

JS code for text dependent on dropdown options

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related