javascript - select option to +100 dollar on element?

Question

Hello I would like to make dropdownlist that has two option : 1. special shipping 2. normal shipping

<select>
<option>special shipping</option>
<option>normal shipping</option>
</select>

I want ,If user choose special shipping, it will +100 dollar on the span element

<p><span id="add_dollar"> 5000 </span> dollar </p>

and it will be 5100

How could I do?

Possible duplicate of [Get selected value/text from Select on change](http://stackoverflow.com/questions/5416767/get-selected-value-text-from-select-on-change) — Turnip, Jan 17 '17 at 15:18

Tim Barnett · Accepted Answer · 2017-01-18T13:55:13.460

2

Something like this?

 var initPrice = 5000;

 $('select').on('change', function() {
   if( this.value == 1 ){
  $('#add_dollar').text(initPrice + 100);
   }else{
  $('#add_dollar').text(initPrice);
   }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
 <option value="">Select one</option>
 <option value="1">Special shipping</option>
 <option value="2">Normal shipping</option>
</select>
<p><span id="add_dollar"> 5000 </span> dollar </p>

edited Jan 18 '17 at 13:55

answered Jan 17 '17 at 15:21

Tim Barnett

1,012
5
9

Can you edit by adding slash to the close span tag? Thanks – doflamingo Jan 18 '17 at 04:50

Nenad Vracar · Answer 2 · 2017-01-17T15:59:09.387

2

You can use change event on select and add its current value to span.

var oValue = parseInt($("#add_dollar").text());

$("select").change(function() {
  var val = $(this).val();
  $("#add_dollar").text(val == 'special' ? oValue + 100 : oValue)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="">
  <option value="normal">Normal</option>
  <option value="special">Special</option>
</select>
<p><span id="add_dollar"> 5000 </span> dollar</p>

edited Jan 17 '17 at 15:59

answered Jan 17 '17 at 15:23

Nenad Vracar

118,580
15
151
176

Thanks but, I guess it will be problem, if I want to use value of option to insert to database – doflamingo Jan 17 '17 at 15:30
@doflamingo why is that a problem? – Nenad Vracar Jan 17 '17 at 15:52
because I want to insert "special" string to database so the value should be value="special" – doflamingo Jan 17 '17 at 15:55
1

In that case you can check if value is == `special` like this https://jsfiddle.net/Lg0wyt9u/1444/ – Nenad Vracar Jan 17 '17 at 15:58

score 0 · Answer 3 · answered Jan 17 '17 at 16:08

First of all correct the syntax mistake in the html (option & span). Here's a plain js solution:

var total = 5000;
var dollar = 100;

var update = function(){
  status = window.event.target.value; //this will check all inputs & selects values
  if(status === 'normal')
    document.getElementById('add_dollar').innerHTML = total;
  if(status === 'special')
    document.getElementById('add_dollar').innerHTML = total + dollar;
};
document.addEventListener("input", update);

<select id="shipping">
<option value="normal">normal shipping</option>
<option value="special">special shipping</option>
</select>
<p><span id="add_dollar">5000</span> dollar</p>

javascript - select option to +100 dollar on element?

3 Answers3