javascript and <option>

Question

I do have the following JavaScript.

<form>  
<select id="sel">
    <option value="1">item_1</option>
    <option value="2">item_2</option>
    <option value="3">item_3</option>
</select>
<div id="show"></div>

</form>

<script type="text/javascript">
var sel = document.getElementById('sel');
sel.onchange = function() {
  var show = document.getElementById('show');
  show.innerHTML = this.value;
};
</script>

If I click onchange a new value (here: 1,2, or 3) is shown in the div "show". This is working fine. But my problem is that I want a different value to be shown but the value (1,2, or 3) should be submitted. The item has a unit like kg, pound, m, m², ....

I want something like that:

<option value="1" value2="kg">item_1</option>

I changed value to value2 in <script> but it didn't help.

show.innerHTML = this.value2;

How can I get it to work?

FYI - this is not jQuery

Barry Chapman
– Barry Chapman

2012-02-08 19:06:21 +00:00
Commented Feb 8, 2012 at 19:06 — Barry Chapman
– Barry Chapman, Commented Feb 8, 2012 at 19:06

sazh · Accepted Answer · 2012-02-08 19:14:43Z

3

if you apply what @Simon said, you can try the following:

sel.onchange = function() {
   var show = document.getElementById('show');
   show.innerHTML = this.options[this.selectedIndex].getAttribute('value2');
}

answered Feb 8, 2012 at 19:14

sazh

1,84216 silver badges20 bronze badges

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

Comments

David Thomas · Accepted Answer · 2012-02-08 19:16:14Z

2

Revised HTML:

<form>  
    <select id="sel">
        <option value="1" data-unit="kg">item_1</option>
        <option value="2" data-unit="kph">item_2</option>
        <option value="3" data-unit="m2">item_3</option>
    </select>
</form>

<div id="show"></div>

The revised HTML uses the custom, and in HTML5 valid, data-* attribute to store the units. I've also moved the div out of the form, but that's an entirely personal inclination, and one that you don't have to maintain (obviously...).

Amended JavaScript:

var sel = document.getElementById('sel');
sel.onchange = function() {
    var show = document.getElementById('show');
    show.innerHTML = this.value + this.options[this.selectedIndex].getAttribute('data-unit');
};

JS Fiddle demo.

The JavaScript looks for the option within the this node with the selectedIndex, and then uses getAttribute() to find the string contained within the data-unit attribute and concatenates that to the this.value string.

answered Feb 8, 2012 at 19:16

David Thomas

254k53 gold badges382 silver badges421 bronze badges

1 Comment

craphunter Over a year ago

This is working! But with this.value the value is still submitted! If this.value isn't in the code, it is working fine. Take a look @diaho Thanks again!

Andrew Whitaker · Accepted Answer · 2012-02-08 19:12:04Z

0

That should probably be:

show.innerHTML = this.options[this.selectedIndex].value;

edited Feb 8, 2012 at 19:12

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

answered Feb 8, 2012 at 19:11

Simon

3,7371 gold badge39 silver badges50 bronze badges

1 Comment

Joel Etherton Over a year ago

No. If you look closely, his this.value statement is contained within a closure. This changes the scope of the this object.

Vikas · Accepted Answer · 2012-02-08 19:13:10Z

0

If the list is not a dynamically generated one, why don't you use an "if else" construct or a "switch" construct on the populated values and display whatever you like?

answered Feb 8, 2012 at 19:13

Vikas

3543 silver badges9 bronze badges

Comments

Mike Samuel · Accepted Answer · 2012-02-08 19:13:35Z

0

Use the value attribute for the value you want submitted to the server since value is meant to contain a string that is meant to be interpreted by a computer as part of a form.

Use a different attribute to associate human readable text with the <option>. title and longdesc would be good choices.

answered Feb 8, 2012 at 19:13

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

Comments

Joel Etherton · Accepted Answer · 2012-02-08 19:14:16Z

0

I would recommend using jQuery if you can. If you're expecting to be able to use html5 compliant browsers, you can use the data attributes on your <option> elements. This way you'd be able to store whatever attributes you found useful.

jQuery data attributes usage

answered Feb 8, 2012 at 19:14

Joel Etherton

37.5k10 gold badges92 silver badges106 bronze badges

Comments

kitti · Accepted Answer · 2012-02-08 19:14:38Z

0

You can use .innerHTML instead of .value if you want to display the text from the drop down. If you want something completely different to be displayed, you'll need a lookup table or something similar - might be easier to use jQuery.

answered Feb 8, 2012 at 19:14

kitti

14.9k33 silver badges50 bronze badges

Collectives™ on Stack Overflow

javascript and <option>

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related