Affect Input CSS Using Javascript and a Select with Options

Question

I am trying to implement the following: change the CSS property visibility: of an<input> tag using a javascript function when the user selects an <option> from a <select>.

Here's my code so far:

main.js:

function change_css(){
    if( $('#billing_method').val() == "CLICK THIS TO CHANGE VISIBILITY" ){
        $('#the_input').css({ 'visibility': 'visible' });
    }else{
        $('#the_input').css({ 'visibility': 'hidden' });
    }
}

page.html:

<select name="billing_method">
    <option onClick='change_css()'>-- SELECT AN OPTION --></option>
    <option onClick='change_css()'>CLICK THIS TO CHANGE VISIBILITY</option>
</select>

<input type="text" id="the_input" value="" placeholder="I AM THE INPUT" />

styles.css:

#the_input{
    visibility: hidden;
}

See jsfiddle

change select name attribute to id

MaVRoSCy
– MaVRoSCy

2014-01-20 14:12:36 +00:00
Commented Jan 20, 2014 at 14:12 — MaVRoSCy
– MaVRoSCy, Commented Jan 20, 2014 at 14:12
sorry, is included now

proPhet
– proPhet

2014-01-20 14:12:46 +00:00
Commented Jan 20, 2014 at 14:12 — proPhet
– proPhet, Commented Jan 20, 2014 at 14:12
@MaVRoSCy no change in outcome

proPhet
– proPhet

2014-01-20 14:13:44 +00:00
Commented Jan 20, 2014 at 14:13 — proPhet
– proPhet, Commented Jan 20, 2014 at 14:13

Musa · Accepted Answer · 2014-01-20 14:17:31Z

2

You have two issues

Your select has a name not an id so you aren't selecting it
Use the change event on the select to call your function. Avoid using click events on option especially if what you want to do is check if the selection changed.

.

<select onchange='change_css()' name="billing_method" id="billing_method">
    <option>-- SELECT AN OPTION --></option>
    <optio>CLICK THIS TO CHANGE VISIBILITY</option>
</select>

http://jsfiddle.net/rnDwr/5/

answered Jan 20, 2014 at 14:17

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blazemonger · Accepted Answer · 2014-01-20 14:15:03Z

2

Option does not respond to onClick. You have to use the change event from select

$('select').change(function(){
    if( $(this).val() == "CLICK THIS TO CHANGE VISIBILITY" ){
        $('#the_input').css({ 'visibility': 'visible' });
    }else{
        $('#the_input').css({ 'visibility': 'hidden' });
    }
});

and remove the on click

edited Jan 20, 2014 at 14:15

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Jan 20, 2014 at 14:14

tehhehehheheehhe

291 bronze badge

Comments

Todd Motto · Accepted Answer · 2014-01-20 14:21:09Z

1

Save yourself some jQuery and write it in plain JavaScript:

var select = document.querySelector('select[name=billing_method]');
var input = document.querySelector('#the_input');
var changeCSS = function () {
    var val = this.options[this.selectedIndex].value;
    if (val.toLowerCase() === 'click this to change visibility') {
        input.style.visibility = 'visible';
    } else {
        input.style.visibility = 'hidden';
    }
};
select.onchange = changeCSS;

http://jsfiddle.net/toddmotto/UNL4k

answered Jan 20, 2014 at 14:21

Todd Motto

9136 silver badges10 bronze badges

Comments

taxicala · Accepted Answer · 2014-01-20 14:15:45Z

0

I see you are using jQuery, this could be much simplier:

$('#billing_method').change(function() {
    if ($(this).val('CLICK THIS TO CHANGE VISIBILITY')) {
        //first option:
        $('#the_input').show();

        //second option:
        $('#the_input').css('visibility', 'visible'); 
    } else {
        //first option:
        $('#the_input').hide();

        //second option:
        $('#the_input').css('visibility', 'hidden'); 
    }
});

answered Jan 20, 2014 at 14:15

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2014-01-20 14:18:35Z

0

Fiddle Demo

$(document).ready(function () {
    $('select[name="billing_method"]').change(function () {
        var that = $(this);
        $('#the_input').css('visibility', function () {
            return (that.find('option:selected').text() === "CLICK THIS TO CHANGE VISIBILITY") ? 'visible' : 'hidden';
        });
    });
});

References

.find()

Attribute Equals Selector

answered Jan 20, 2014 at 14:18

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Collectives™ on Stack Overflow

Affect Input CSS Using Javascript and a Select with Options

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related