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
– putvande, Commented Jun 2, 2016 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
– Alexey Ayzin, Commented Jun 2, 2016 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
– Josiah Keller, Commented Jun 2, 2016 at 20:35
What did the onclick do? What did it look like? Can you put that in your question? — putvande
– putvande, Commented Jun 2, 2016 at 20:36

700 Software · Accepted Answer · 2016-06-02 20:36:42Z

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 2, 2016 at 20:36

700 Software

88.3k89 gold badges244 silver badges349 bronze badges

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

3 Comments

Alexey Ayzin Over a year ago

Is the for loop meant to have brackets?

J.Joe Over a year ago

@AlexeyAyzin brackets is optional if there is only one statement. But adding them is better habit.

Alexey Ayzin Over a year ago

Also onchange didn't seem to work. If you want to take a look at the product/source: secure.scheduleinterpreter.com/bestinterpreters/wip/dashboard/…

jeffjenx · Accepted Answer · 2016-06-02 20:35:52Z

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 2, 2016 at 20:35

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

2 Comments

Tomer W Over a year ago

might want to address the min-width directive as well as width

jeffjenx Over a year ago

@TomerW good point. In JavaScript, it would be the .style.minWidth or .style['min-width'] property.

kthornbloom · Accepted Answer · 2016-06-02 20:38:51Z

0

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/

answered Jun 2, 2016 at 20:38

kthornbloom

3,7403 gold badges34 silver badges47 bronze badges

1 Comment

putvande Over a year ago

Do you have an answer without jQuery? OP didn't tag it.

Collectives™ on Stack Overflow

Modifying CSS Using Select Tag

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related