Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

138
Views
Get a ID Value from Select DropDown and Add in an Input Field

I want to get an ID value from select dropdown and insert it into an input field.

That is the select option html;

<select name="student_class" class="input_box" onchange="myFunction(this.value);">
                <option value="Play Group" id="1400">Play Group</option>
                <option value="Nursery" id="1400">Nursery</option>
                <option value="Prep" id="1400">Prep</option>
                <option value="1" id="1600">1</option>
                <option value="2" id="1600">2</option>
                <option value="3" id="1600">3</option>
                <option value="4" id="1600">4</option>
                <option value="5" id="1600">5</option>
                <option value="6" id="1800">6</option>
                <option value="7" id="1800">7</option>
                <option value="8" id="1800">8</option>
                <option value="9" id="2500">9</option>
                <option value="10" id="2500">10</option>
            </select>

This is the input field html;

<input type="text" class="input_box" id="actual_fee" style="background: #EFEFEF; border: 1px solid #000; color: #000;" name="actual_fee" size="5" value="" readonly="readonly">

And this is the javascript I am using;

<script type="text/javascript">
function myFunction(element)
{
    document.getElementById("actual_fee").value = element;
}
</script>

But the problem is this code only shows the option's "value" and not its "ID" value.

Please help.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Use selsectedIndex Property of your element:

function myFunction(element)
{
    document.getElementById("actual_fee").value = element.options[element.selectedIndex].id;
}
<select name="student_class" class="input_box" onchange="myFunction(this);">
                <option value="Play Group" id="1400">Play Group</option>
                <option value="Nursery" id="1400">Nursery</option>
                <option value="Prep" id="1400">Prep</option>
                <option value="1" id="1600">1</option>
                <option value="2" id="1600">2</option>
                <option value="3" id="1600">3</option>
                <option value="4" id="1600">4</option>
                <option value="5" id="1600">5</option>
                <option value="6" id="1800">6</option>
                <option value="7" id="1800">7</option>
                <option value="8" id="1800">8</option>
                <option value="9" id="2500">9</option>
                <option value="10" id="2500">10</option>
            </select>

<input type="text" class="input_box" id="actual_fee" style="background: #EFEFEF; border: 1px solid #000; color: #000;" name="actual_fee" size="5" value="" readonly="readonly">

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!