Manipulate CSS Properties with Javascript Based on Dropdown Selection

Question

Manipulate CSS Properties with Javascript Based on Dropdown Selection

I am currently working on implementing a feature that involves changing the CSS property visibility: of an <input> element using a JavaScript function triggered by user selection in a <select> dropdown.

Here's what I have so far in my code:

main.js:

function adjustVisibility(){
    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='adjustVisibility()'>-- SELECT AN OPTION --></option>
    <option onClick='adjustVisibility()'>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;
}

Check out the demo at jsfiddle

javascript jquery html css

Answer 1

Answer №1

There are two key issues at hand:

The select element has a name attribute instead of an id, causing selection errors
It is recommended to use the change event on the select element rather than click events on options for detecting selection changes

.

<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/

Answer 2

There are two key issues at hand:

The select element has a name attribute instead of an id, causing selection errors
It is recommended to use the change event on the select element rather than click events on options for detecting selection changes

.

<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/

Answer 3

Answer №2

When it comes to triggering an action based on user input, the onClick method might not always work. In this case, you should utilize the change event associated with a select element instead.

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

Make sure to remove the onClick function for smoother functionality.

Answer 4

When it comes to triggering an action based on user input, the onClick method might not always work. In this case, you should utilize the change event associated with a select element instead.

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

Make sure to remove the onClick function for smoother functionality.

Answer 5

Answer №3

Optimize your code by using plain JavaScript instead of jQuery:

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

http://jsfiddle.net/toddmotto/UNL4k

Answer 6

Optimize your code by using plain JavaScript instead of jQuery:

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

http://jsfiddle.net/toddmotto/UNL4k

Answer 7

Answer №4

It appears that you are utilizing jQuery for this task, but there is a simpler way to achieve the same result:

$('#billing_method').on('click', function() {
    if ($(this).val('CLICK THIS TO CHANGE VISIBILITY')) {
        $('#the_input').toggle();
    } else {
        $('#the_input').css('visibility', function(index, value) {
            return value === 'hidden' ? 'visible' : 'hidden';
        });
    }
});

Answer 8

It appears that you are utilizing jQuery for this task, but there is a simpler way to achieve the same result:

$('#billing_method').on('click', function() {
    if ($(this).val('CLICK THIS TO CHANGE VISIBILITY')) {
        $('#the_input').toggle();
    } else {
        $('#the_input').css('visibility', function(index, value) {
            return value === 'hidden' ? 'visible' : 'hidden';
        });
    }
});

Answer 9

Answer №5

Unique Demo

$(document).ready(function () {
    $('select[name="payment_method"]').change(function () {
        var current = $(this);
        $('#update_visibility').css('display', function () {
            return (current.find('option:selected').text() === "CLICK HERE TO TOGGLE VISIBILITY") ? 'block' : 'none';
        });
    });
});

References

Find Method

Attribute Selector Reference

Answer 10

Unique Demo

$(document).ready(function () {
    $('select[name="payment_method"]').change(function () {
        var current = $(this);
        $('#update_visibility').css('display', function () {
            return (current.find('option:selected').text() === "CLICK HERE TO TOGGLE VISIBILITY") ? 'block' : 'none';
        });
    });
});

References

Find Method

Attribute Selector Reference

Manipulate CSS Properties with Javascript Based on Dropdown Selection

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

Issue with model not triggering delete request upon destruction

Is the CSS :not selector failing to operate as expected?

Injecting multiple instances of an abstract service in Angular can be achieved using the following techniques

Troubleshooting Azure typescript function: Entry point for function cannot be determined

PHP do-while loop triggers out of memory error while running SQL query code

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

What are the steps to execute PhantomJS on a client machine?

Extract a value from an array that is not located at the array's tail using Javascript

Issue with React Material UI Menu not closing properly

Adjusting data points on a radar chart.js through user interaction

What are the steps for implementing timezone-js?

Leveraging ACE in conjunction with WT

Angular 2: The window.crypto.subtle.importKey function functions properly on 'localhost' but encounters issues on an 'ip' address

Initiate a jQuery modal dialogue box

Jquery Image Slider showcasing a variety of image sizes

Ways to terminate session using ajax when input is empty; Notice of an undefined variable

Guide on incorporating interactive visuals or features within a panoramic image viewer through the use of THree.js and webGL

Having difficulty replicating the sorting process in Vue.js for the second time

Embracing the Power of Sass