There is a form with select'ami.
When submitting a form, the selected select values ​​are saved.
The task is to assign the css-classes to the select'am, in which non-empty values ​​are selected (that is, there are options with the selected selected), after submitting the form.

Maybe someone knows the appropriate javascript ?

  • And if on php? Or html + js page? - Winteriscoming
  • Smarty there, I have already solved the question, thank document.getElementById ("myselect"). className + = "active-select"; however, I had to put conditions through smarti - Alexander Vladimirovich
  • Would answer your question, in the future people can be helped. - Winteriscoming

2 answers 2

With the help of css you can create a request for the marked options ( option[selected] ), but it will no longer be possible to turn up to select .
They say that soon there will be a pseudo-class :has with which you can check already the select itself for the occurrence of the desired selector. But even if it appears tomorrow, then in reality it will not be possible to use it soon. Therefore, now only using javascript -

 // получаем все option с selected let selected = document.body.querySelectorAll( 'option[selected]' ); // преобразуем в массив с select let selectAll = Array.from( selected ).map( item => item.closest( 'select' ) ); // добавляем какие-то классы selectAll.forEach( select => select.classList.add( 'some-class' ) );

    At the request of @Winteriscoming I will answer your question, but I am afraid that the answer will not be useful to everyone.

    In general, the problem is solved with the help of javascript in one line.

     document.getElementById("myselect").className += "active-select";

    That is, we assign the #myselect selector an additional class .active-select, which sets the highlight.

    But, the snag is that this should be done only if the value is already selected in the select. My page uses smarty, therefore, I can set a condition, like so.

     <option value="{$vendor.id}" {if $vendor.id == 1}selected="selected" вот сюда добавив переменную {$controller="1"}{/if}>{$vendor.title}</option>

    And then execute the script, provided

      {if $controller == 1} {literal} <script> document.getElementById("id_vendor").className += "active-select"; </script> {/literal} {/if}

    Something like that. I am sure that javascript could somehow track the selected parameter for its presence, and then assign a class. But with smarty, I quickly guessed))