0

I want class 'myclass' and 'col-3' only to be applied in lg size. In other cases I want only 'col'. How to do that?

I can do that:

<div class="d-none d-lg-block">
    <div class="myclass col-3">
        <select id="country-select">
            <option value="">All</option>
            <option value="FIN">Finland</option>
            <option value="CAN">Canada</option>
        </select>
    </div>
</div>

<div class="d-block d-lg-none">
    <div class="col">
        <select id="country-select">
            <option value="">All</option>
            <option value="FIN">Finland</option>
            <option value="CAN">Canada</option>
        </select>
    </div>
</div>

But there is a problem that I have two select forms with the same id 'country-select' and my jquery functions don't work correctly. I need the solution with only one select form with id ='country-select'.

I don't want to send data from select forms to server, so I don't need 'name' attribute. I need to use $("#country-select").val() in jquery code, but there is a problem I have two select forms with id ='country-select' in my solution.

Milan Lucic
  • 1
  • 1
  • Possible duplicate of [Difference between id and name attributes in HTML](https://stackoverflow.com/questions/1397592/difference-between-id-and-name-attributes-in-html) – Alessandro Da Rugna Jul 21 '19 at 04:42

1 Answers1

0

Based on your condition for adding or removing class, you can use jquery:

$('.className').addClass('lg-size-class');

$('.className').removeClass('lg-size-class');

Note that id attribute should have a unique value when using it.

Isisco
  • 141
  • 9