Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Posted by don bencilao
don bencilao
4,153 Points

how to know select option value

hi,

I'm just practicing javascript, and I wanted to build a sort of quoting form.

first the user will pick from the two options, then if the option is selected I want the formula to reference only the objects for that options.

    <div class="container">
        <p>Type in the requested values</p>
        <select id="terminate">
            <option>choose</option>
            <option value="termite">termite</option>
            <option value="rat">rat</option>
        </select>
        <input id="area" type="text" value="" placeholder="floor area/sq.m">
        <button id="calculate">button</button>
        <input id="quote" type="text" value="">
    </div>


<script>
    var x = document.getElementById("terminate").selectedIndex;
    var y = document.getElementsByTagName("option")[x].value;
    console.log(y);

    y.addEventListener('change', function(){
        ///put code in here///
    });
<script>

5 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,592 Points

Hi Don,

You want to listen for the change event on the select element. Once you select an option, it's the select element that holds the value of what option was selected.

See if this helps you:

var terminate = document.getElementById("terminate");

terminate.addEventListener('change', function(){
      console.log(this.value);
    });
Coco Jackowski
Coco Jackowski
12,914 Points
Coco Jackowski
Coco Jackowski
12,914 Points

You're looking for JavaScript's .value as in: var terminateValue = document.getElementById('terminate').value

don bencilao
don bencilao
4,153 Points
don bencilao
don bencilao
4,153 Points

yes of the selected one. can you show me how?

Coco Jackowski
Coco Jackowski
12,914 Points
Coco Jackowski
Coco Jackowski
12,914 Points

I'm not sure what you're looking for, other than how to use JavaScript to read the value of a <select> element, which you do with the code in my previous response. If you place that code inside the anonymous function in your eventListener, the variable terminateValue will contain the value of the selected input field, and you can use that value to make decisions as to what do do later in the code.

don bencilao
don bencilao
4,153 Points
don bencilao
don bencilao
4,153 Points

yes but what if I pick a different item?

I want the script to change value according to the item selected by the user.