There is a test task to make up a small page, one of the tasks for js is: (literally) customized selects + picture below.

I am not a very experienced person in coding, so I don’t know what to really do. I ask the advice of the pros.

enter image description here

Closed due to the fact that the issue is too general for the participants Grundy , HamSter , user207618, aleksandr barakin , fori1ton Oct 21 '16 at 10:11 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

1 answer 1

I suppose that the meaning of the task is most likely in the implementation of custom behavior in the browser, the technique for obtaining attributes, the setting value so on. Or, perhaps, the cross-browser styling techniques of the native selector. And there are a lot of ways to make a set decorator, even if you don’t take ready-made libraries. The choice of method depends on the way of implementation of the frontend adopted on the project. The need for custom selets exists because browser-based selectors are poorly styled by browsers, but there is no universal solution covering all cases. The essence of the technique lies in modeling the selector by <div /> , <span /> and <input /> and mapping the corresponding events and properties of the original element. Usually there is a goal to set fields of the appropriate form The main data transfer method is the attributes and properties of the original <select> , which, as a rule, is hidden. There is a possibility that we need a multi-selector implementation. In general, this task has several levels of complexity and possible elaboration. Ready-made solutions, on the other hand, add their own level of complexity both in CSS and in scripts, especially if there are many instances and each has a complex behavior.