JS function to hide label as soon as the user selects an option

Question

I'm looking for a JS function particularly for select elements which can hide the associated label as soon as any option is selected except for first one. Below is the HTML I'm using...

HTML

<label for="ABC">LABEL</label>

<select id="ABC">
    <option value="None"> </option>
    <option value="temp1"> Temp1 </option>
    <option value="temp2"> Temp2 </option>
</select>

I'm new to JS so I just can't figure out a way... Although I can make a function which can toggle the visibility of an associated label onFocus and onBlur, But I just can't figure out the code for this... — 0x550x42, Jul 16 '13 at 07:05
Since you're new here, I'd recommend you check out the [question checklist](http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist). That's usually what people expect from a good question. Following those steps is the best way to get a good answer in StackOverflow. — elclanrs, Jul 16 '13 at 07:15
Is this supposed to be separate from, or included with, [your *other* question](http://stackoverflow.com/questions/17668248/declare-a-javascript-function-which-can-hide-the-label-of-the-calling-html-eleme)? Will there be another, soon, for how to handle `textarea` elements, checkboxes..? — David Thomas, Jul 16 '13 at 07:23
@DavidThomas Hahaha... Actually it's related to my previous post but it's not the same scenario... There I was trying to hide the label onFocus and onBlur events. And here I want an eventListener kind of function which waits for an option to be selected and then fires the operation... — 0x550x42, Jul 16 '13 at 07:37

score 0 · Accepted Answer · answered Jul 16 '13 at 07:37

This is how I do it based on prototype.js

<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
    function selectOption(elm) {
        elm = $(elm);
        var targets = $$("label[for=" + elm.id + "]");
        if (targets && targets.length > 0) {
            var label = targets[0];
            label.hide();
            elm.disabled = true;
        }
    }
</script>

<select id="ABC" onchange="selectOption(this);">
    <option value="None"> </option>
    <option value="temp1"> Temp1 </option>
    <option value="temp2"> Temp2 </option>
</select>

Note the $$ function, it's an easy way to find elements in your page. If you use jQuery, there would be other functions doing the same thing. and the official website of prototype: http://prototypejs.org/

JS function to hide label as soon as the user selects an option

1 Answers1