JavaScript displaying content

Question

I want to make script which display text when somebody choose option from select. I was trying this script but it's wasn't work.

<select name="inputDrugForm">
    <option id="one">Tabletki</option>
    <option id="two">Syrop</option>
    <option id="one">Saszetki</option>
    <option id="two">Spray</option>
    <option id="one">Inny</option>
 </select><br>
 <div id="content"></div>

        <script type="text/javascript">
        var b1 = document.getElementById('one'),
            b2 = document.getElementById('two'),
            content = document.getElementById('content');

        b1.onselect = function() {
            content.innerHTML = 'text one';
        }

        b2.onselect = function() {
            content.innerHTML = 'text two';
        }
        </script>

you are doing it wrong, you have to assign values to the options, and use onchange event on whole select not on options separately, then read the value of it in that event to know what was selected — Flash Thunder
– Flash Thunder, Commented Nov 26, 2019 at 23:11

Damodhar · Accepted Answer · 2019-11-26 23:24:07Z

1

You need to follow some basic step to implement select

1)create select element in a proper way to add options with valid values

<select id="inputDrugForm">
  <option value="Tabletki">Tabletki</option>
<option value="Syrop">Syrop</option>
<option value="Saszetki">Saszetki</option>
<option value="Spray">Spray</option>
<option value="Inny">Inny</option>
</select>

2)add change event for select element

<script type="text/javascript">
        var b1 = document.getElementById('inputDrugForm'),
            content = document.getElementById('content');

        b1.onchange = function(e) {

            content.innerHTML = e.target.value;
        }
</script>

other option you can add change event in the select element directly

answered Nov 26, 2019 at 23:24

Damodhar

1,3178 silver badges20 bronze badges

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

Comments

Özgür Can Karagöz · Accepted Answer · 2019-11-26 23:23:15Z

1

id attr is not used on option element !!!

simple example :

        var b = document.getElementById('inputDrug'),
            content = document.getElementById('content');

        b.onchange = function() {
            content.innerHTML = b.value;
        }

<select name="inputDrugForm" id="inputDrug">
    <option value="one">Tabletki</option>
    <option value="two">Syrop</option>
    <option value="one">Saszetki</option>
    <option value="two">Spray</option>
    <option value="one">Inny</option>
 </select><br>
 <div id="content"></div>

edited Nov 26, 2019 at 23:23

answered Nov 26, 2019 at 23:17

Özgür Can Karagöz

1,0461 gold badge14 silver badges33 bronze badges

3 Comments

Flash Thunder Over a year ago

not sure if it's what op was asking for, I guess he wanted to categorize products, that's why there is "one", "two", "one", "two"

Özgür Can Karagöz Over a year ago

then it must use the if condition.

Flash Thunder Over a year ago

not really, can assign values to options like this <option value="one" ... and the rest will be the same

Renaldo Balaj · Accepted Answer · 2019-11-26 23:18:09Z

0

<select id="MySelect" onchange="myFunction()">
   <option value="one">Tabletki</option>
   <option value="two">Syrop</option>
   <option value="one">Saszetki</option>
   <option value="two">Spray</option>
   <option value="one">Inny</option>
</select>

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("content").innerHTML = "You selected: " + x;
}
</script>

answered Nov 26, 2019 at 23:18

Renaldo Balaj

2,45014 silver badges24 bronze badges

Collectives™ on Stack Overflow

JavaScript displaying content

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related