javascript - Show text when a dropdown option is selected - Stack Overflow

admin管理员组

文章数量:1323035

I am trying to figure out a way to display a some text based on the drop down item selected by the user, in the "result" div below. I know how to do this with a normal input field but I am having trouble understanding how to pass in "option values" into the javascript function. This is what I tried so far...

In the code below, I am simply trying to successfully pass whatever drop down item value is selected into the javascript function and print out the name of that value in the "result" div... once I am able to do that, I will implement the 'tip' feature described above.

My Markup:

<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
    <option selected="selected" value="fruit_search">fruits</option>    
    <option value="veggies_search">veggies</option>
    <option value="animals_search">animals</option>
    <option value="all_search">all</option>
</select>

<div id="result"></div>

My JavaScript:

<script type="text/javascript">
    function dropdownTip(value){
        document.getElementByID("result").innerHTML = value;
    }
</script>

I am trying to figure out a way to display a some text based on the drop down item selected by the user, in the "result" div below. I know how to do this with a normal input field but I am having trouble understanding how to pass in "option values" into the javascript function. This is what I tried so far...

In the code below, I am simply trying to successfully pass whatever drop down item value is selected into the javascript function and print out the name of that value in the "result" div... once I am able to do that, I will implement the 'tip' feature described above.

My Markup:

<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
    <option selected="selected" value="fruit_search">fruits</option>    
    <option value="veggies_search">veggies</option>
    <option value="animals_search">animals</option>
    <option value="all_search">all</option>
</select>

<div id="result"></div>

My JavaScript:

<script type="text/javascript">
    function dropdownTip(value){
        document.getElementByID("result").innerHTML = value;
    }
</script>

• javascript

Share Improve this question Follow edited Aug 9, 2012 at 17:35 AnchovyLegend asked Aug 9, 2012 at 17:29 AnchovyLegendAnchovyLegend 12.5k4141 gold badges152152 silver badges240240 bronze badges 2

• 1 Your code works fine, you just have a typo: document.getElementByID(..) should be document.getElementById(..). – Teemu Commented Aug 9, 2012 at 17:51
• thats is the answer I needed;) I am new to javascript. One thing I don't like is that having a typo can result in hours of debugging and is hard to troubleshoot. Thank you very much for pointing that out, your ment is my solution. – AnchovyLegend Commented Aug 9, 2012 at 17:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Is this what you wanted? check the fiddle below

http://jsfiddle/b6ydm/

Try this:

<select onChange="dropdownTip()" id="select" name="search_type" style="margin-right:10px; margin-top:2px;">
    <option selected="selected" value="fruit_search">fruits</option>    
    <option value="veggies_search">veggies</option>
    <option value="animals_search">animals</option>
    <option value="all_search">all</option>
</select>

<div id="result"></div>


<script type="text/javascript">
    function dropdownTip(){
        var value = document.getElementById('select').value;
        document.getElementByID("result").innerHTML = value;
    }
</script>

本文标签： javascriptShow text when a dropdown option is selectedStack Overflow