CODEWITHSUNDEEP
javascripthtmlcss
Alexey Ayzin
Alexey Ayzin

Reputation: 209

Modifying CSS Using Select Tag

I have a list of options:

<select id="numOfcards">
    <option value="Select">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

I also have flip-container that is, as a default, set at 33% width:

.flip-container {
    perspective: 1000px;
    display: inline-block;
    width: 33%;
    min-width: 400px;
    padding-right: 2px;
}

What I want to ultimately happen is this:

When the option 1 is selected, the width is 100%. When the option 2 is selected, the width is 48%. When the option 3 is selected, the width is 33%. When the option 4 is selected, the width is 24%. When the option 5 is selected, the width is 19%.

I don't need the full code for this, just to know if (A) this is possible without a backend language, and (B) the main concept behind it. I looked through google and stackoverflow and couldn't seem to find a question with these exact specifications. Preferably, I would want the answer as JS.

Thanks.

Upvotes: 0

Views: 50

Answers (3)

kthornbloom
kthornbloom

Reputation: 3730

Here's how I'd do it with a little jQuery:

$('select').on('change', function() {
    var selValue = parseInt(this.value, 10);
    switch (selValue) {
        case 1:
            $('.thing').css('width', '100%');
            break;
        case 2:
            $('.thing').css('width', '48%');
            break;
        case 3:
            $('.thing').css('width', '33%');
            break;
        case 4:
            $('.thing').css('width', '24%');
            break;
        case 5:
            $('.thing').css('width', '19%');
            break;
    }
});

Demo: https://jsfiddle.net/ksr2p48j/

Upvotes: 0

700 Software
700 Software

Reputation: 87783

Good question. There are no practical ways to do this with pure-CSS, but it can be done quite easily with JavaScript. Each option should have data of the target width: i.e.
<option value="1" data-width="100%">1</option>

Then at the end of your page, add a <script>. Usually scripts are stored in separate .js files, so you add <script src="main.js"></script>. <script> src works just like <img> src, but you can also do inline scripts if you prefer not to store them in a separate file.

main.js will look like

var select = document.getElementById('numOfcards')
var containers = document.querySelectorAll('.flip-container')
select.onchange = function () {
  var selectedOption = this.options[this.selectedIndex]
  for(var i = 0; i < containers.length; i++)
    containers[i].style.width = selectedOption.getAttribute('data-width')
}

Upvotes: 3

jeffjenx
jeffjenx

Reputation: 17457

Yes, in JavaScript, add an event listener to the select element that watches for the change event.

Whenever the change event is triggered, get the value and loop through all the .flip-container elements using querySelectorAll. Update the .style.width property on each according to the value of the select element.

Upvotes: 2

Related Questions