JavaScript : How to get selected dropdown value?

Question

I'm using code from w3schools & attempting to modify it so that the script will multiply by a different valNum based on the value selected from the drop down list. So if All Purpose Flour is selected the Output = Input multiplied by 4.409245; for Cane Sugar it would be Output = Input multiplied by 8.82.

Here's what I have so far. I plan to add more option values to the list but need help figuring out how to do this. I'm new to JavaSript; sorry if this looks odd. Any feedback is appreciated. Thanks!

<select name="ingredients" id="ingredients">
          <option value="flour">All Purpose Flour</option>
          <option value="sugar">Cane Sugar</option>
</select>
    
    
<p>
  <label>Pounds</label>
   <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Ounces: <span id="outputOunces"></span></p>
    
    
 <script>
    function weightConverter(valNum) {
      document.getElementById("outputOunces").innerHTML=valNum*4.409245;
    }
 </script>

Does this answer your question? [How to select value from dropdown in javascript and multiply with entered number from textbox](https://stackoverflow.com/questions/53548296/how-to-select-value-from-dropdown-in-javascript-and-multiply-with-entered-number) — NcXNaV, Aug 09 '21 at 03:25

score 1 · Accepted Answer · answered Aug 09 '21 at 03:39

Updated your code with a few pointers -

To add another option, say Cheese with multiplier of 2, you can just add the option in the HTML under the select element and add a new case in the switch statement as shown in the below code.
Have added the method weightConverter for the onChange of the select component for the case when user enters some value first in the input box and then decides to change their mind and change the value in the select component, it re-evaluates the Output after changing the option in the select component.

<select name="ingredients" id="ingredients" onChange="weightConverter()">
  <option value="flour">All Purpose Flour</option>
  <option value="sugar">Cane Sugar</option>
  <option value="cheese">Cheese</option>
</select>
<p>
  <label>Pounds:</label>
  <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter()">
</p>
<p>Ounces: <span id="outputOunces"></span></p>


<script>
  function weightConverter() {
    const dropDownValue = document.getElementById('ingredients').value;
    const valNum = document.getElementById('inputPounds').value;
    let multiplier = 0;
    switch (dropDownValue) {
      case 'flour':
        multiplier = 4.409245;
        break;
      case 'sugar':
        multiplier = 8.82;
        break;
      case 'cheese':
        multiplier = 2;
        break;
      default:
        break;
    }
    document.getElementById("outputOunces").innerHTML = valNum * multiplier;
  }
</script>

Thanks! This works & makes it easier to add additional items to the drop down list. — NewtoJava, Aug 09 '21 at 04:05

score 0 · Answer 2 · edited Aug 09 '21 at 06:07

0

Please use this code.

function selectionChange() {
  weightConverter(document.getElementById("inputPounds").value);
}

function weightConverter(valNum) {
  if (document.getElementById("ingredients").value == "flour")
    document.getElementById("outputOunces").innerHTML = valNum * 4.409245;
  else
    document.getElementById("outputOunces").innerHTML = valNum * 8.82;
}

<select name="ingredients" id="ingredients" onchange="selectionChange()">
  <option value="flour">All Purpose Flour</option>
  <option value="sugar">Cane Sugar</option>
</select>

<p>
  <label>Pounds</label>
  <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Ounces: <span id="outputOunces"></span></p>

edited Aug 09 '21 at 06:07

Keshav Bajaj

863
1
5
13

answered Aug 09 '21 at 03:16

Kirill Savik

1,228
4
7

Thank you! This works but once the Input is entered it doesn't automatically refresh the Output upon changing values from the drop down list. Wondering if that's possible to do. No worries if not. – NewtoJava Aug 09 '21 at 03:38
Did you add "selectionChange" function to select tag? – Kirill Savik Aug 09 '21 at 03:39

Raeesh Alam · Answer 3 · 2021-08-09T03:47:09.680

You can try below snippet.

function selectionChange() {
    weightConverter(document.getElementById("inputPounds").value);
}
function weightConverter(valNum) {
    if (document.getElementById("ingredients").value == "flour"){
        document.getElementById("outputOunces").innerHTML = (valNum * 4.409245).toFixed(6);
    }
    else{
        document.getElementById("outputOunces").innerHTML=(valNum*8.82).toFixed(6);
    }
}

<select name="ingredients" id="ingredients" onchange="selectionChange()">
    <option value="flour">All Purpose Flour</option>
    <option value="sugar">Cane Sugar</option>
</select>

<p>
    <label>Pounds</label>
    <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter(this.value)">
</p>
<p>Ounces: <span id="outputOunces">0.000000</span></p>

JavaScript : How to get selected dropdown value?

3 Answers3