CODEWITHSUNDEEP
javascript
Kristian Rafteseth
Kristian Rafteseth

Reputation: 2032

How to run a piece of javascript when you select a dropdown option?

I have a select with loads of options. (Code below shortened for sake of example). I want it to set the value of the input textfield "hoh" to "10" when you click/select all dropdown options, except one, that should set it to 50.

I imagined something like this would work, but its not. What am I doing wrong here?

<select>
    <option onselect="document.getElementById('hoh').value = '50'">Hey</option>
    <option onselect="document.getElementById('hoh').value = '10'">Ho</option>
    <option onselect="document.getElementById('hoh').value = '10'">Lo</option>
    ....
</select>

<input type="text" id="hoh" value="10">

Upvotes: 0

Views: 61

Answers (4)

keypaul
keypaul

Reputation: 497

Try this code

var inp = document.getElementById('hoh');
sel.onchange = function(){
    var v = this.value;
    if( v !== '50'){
         v = '10';
    }
    inp.value = v;
};

Upvotes: 0

faintsignal
faintsignal

Reputation: 1836

The onselect event refers to selecting (or highlighting) text. To trigger an action when a dropbox selection changes, use the onchange event trigger for the <select> element.

E.g. Since you didn't already set the value attribute of your option tags.

<select id="myselect" onchange="myFunction()">
    <option value="50">Hey</option>
    <option value="10">Ho</option>
    <option value="10">Lo</option>
    ....
</select>

and somewhere inside of a <script> tag (presumably in your HTML header) you define your javascript function.

<script type="text/javascript>

function myFunction() {
   var dropbox = document.getElementById('myselect');
   document.getElementById('hoh').value = dropbox[dropbox.selectedIndex].value;
}

</script>

I'm not sure it's wise to repeat the same value among different options in a droplist, but you could expand on this to implement the result other ways, such as if the sole option which will have value 50 is in a certain position, you could compare the selectedIndex to that position.

Upvotes: 1

Icepickle
Icepickle

Reputation: 12796

you could add an onchange event trigger to the select, and use the value of an option to show in the textbox

see http://jsfiddle.net/Icepickle/5g5pg/ here

<select onchange="setValue(this, 'hoh')">
    <option>-- select --</option>
    <option value="10">Test</option>
    <option value="50">Test 2</option>
</select>
<input type="text" id="hoh" />

with function setValue as

function setValue(source, target) {
    var tg = document.getElementById(target);
    if (!tg) {
        alert('No target element found');
        return;
    }
    if (source.selectedIndex <= 0) {
        tg.value = '';
        return;
    }
    var opt = source.options[source.selectedIndex];
    tg.value = opt.value;
}

Upvotes: 0

isherwood
isherwood

Reputation: 61083

Something like this should work:

<script>
function myFunc(val) {
    if (val == '50') {
        document.getElementById('hoh').value = val;
    } else {
        document.getElementById('hoh').value = '10';
    }
}
</script>

<select onchange="myFunc(this.value)">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="50">fifty</option>
</select>

http://jsfiddle.net/isherwood/LH57d/3

Upvotes: 5

Related Questions