Modifying CSS Using Select Tag

Question

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.

No backend language necessary. JavaScript can do this. Have you tried any? — putvande, Jun 02 '16 at 20:34
Ok, that's good news. I tried to do onclick, but that did not work. If you have any other ideas? @putvande — Alexey Ayzin, Jun 02 '16 at 20:34
Change the `value` attribute on each option to the corresponding percentage. Add a JavaScript event handler to the select list, get the select list's `value` property (which will be the selected percentage) and use that to set the CSS. — Josiah Keller, Jun 02 '16 at 20:35
What did the onclick do? What did it look like? Can you put that in your question? — putvande, Jun 02 '16 at 20:36

score 3 · Accepted Answer · answered Jun 02 '16 at 20:36

3

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')
}

answered Jun 02 '16 at 20:36

700 Software

85,281
83
234
341

Is the for loop meant to have brackets? – Alexey Ayzin Jun 02 '16 at 20:39
1

@AlexeyAyzin brackets is optional if there is only one statement. But adding them is better habit. – J.Joe Jun 02 '16 at 20:40
Also onchange didn't seem to work. If you want to take a look at the product/source: https://secure.scheduleinterpreter.com/bestinterpreters/wip/dashboard/ada/Dashboard/dashboard.004.html – Alexey Ayzin Jun 02 '16 at 20:42

score 2 · Answer 2 · answered Jun 02 '16 at 20:35

2

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.

answered Jun 02 '16 at 20:35

jeffjenx

17,041
6
57
99

1

might want to address the `min-width` directive as well as `width` – Tomer W Jun 02 '16 at 20:36
@TomerW good point. In JavaScript, it would be the `.style.minWidth` or `.style['min-width']` property. – jeffjenx Jun 02 '16 at 20:38

score 0 · Answer 3 · answered Jun 02 '16 at 20:38

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/

Do you have an answer without jQuery? OP didn't tag it. – putvande Jun 02 '16 at 20:40 — putvande, Jun 02 '16 at 20:40

Modifying CSS Using Select Tag

3 Answers3