How to make it so that when you select, for example, USA , the words Selected country remain. That is, Selected country: must always be inside regardless of the country selected.
& lt; select name = "country" & gt;
& lt; option value disabled selected & gt; Selected country: Russia & lt; / option & gt;
& lt; option & gt; Russia & lt; / option & gt;
& lt; option & gt; USA & lt; / option & gt;
& lt; option & gt; Turkey & lt; / option & gt;
& lt; option & gt; China & lt; / option & gt;
& lt; / select & gt; Answer 1, authority 100%
You can do this:
-
put
selectin a separate container, for example,.block; -
add another block to
.block, for example,.placeholder, into which we will display the text “Selected country:” + the text of the selectedoption, and place it on top ofselect; -
for
.placeholderin css, specifypointer-events: none;, so as not
prevent click onselect
In jQuery it will look like this:
function selPlaceholder (block) {
var placeholder = block.find ('. placeholder'),
select = block.find ('select');
placeholder.text (placeholder.attr ('data-text') + select.find ('option: selected'). text ());
}
$ ('. block'). each (function () {
selPlaceholder ($ (this));
});
$ ('. block select'). on ('change', function () {
selPlaceholder ($ (this) .closest ('. block'));
}); . block,
.block select {
position: relative;
width: 300px;
font-family: 'Arial';
font-size: 12px;
}
.block .placeholder {
position: absolute;
z-index: 1;
left: 5px;
top: 2px;
pointer-events: none;
background: #fff;
} & lt; script src = "https://ajax.googleapis.com/ajax/libs /jquery/2.1.1/jquery.min.js"></script>
& lt; div class = "block" & gt;
& lt; div class = "placeholder" data-text = "Selected country:" & gt; & lt; / div & gt;
& lt; select name = "country" & gt;
& lt; option & gt; Russia & lt; / option & gt;
& lt; option & gt; USA & lt; / option & gt;
& lt; option & gt; Turkey & lt; / option & gt;
& lt; option & gt; China & lt; / option & gt;
& lt; / select & gt;
& lt; / div & gt; & lt; br / & gt; & lt; br / & gt;
& lt; div class = "block" & gt;
& lt; div class = "placeholder" data-text = "Selected account type:" & gt; & lt; / div & gt;
& lt; select name = "type" & gt;
& lt; option & gt; Free & lt; / option & gt;
& lt; option & gt; Professional & lt; / option & gt;
& lt; option & gt; Business & lt; / option & gt;
& lt; / select & gt;
& lt; / div & gt; & lt; br / & gt; & lt; br / & gt;
& lt; div class = "block" & gt;
& lt; div class = "placeholder" data-text = "Selected currency:" & gt; & lt; / div & gt;
& lt; select name = "currency" & gt;
& lt; option & gt; USD & lt; / option & gt;
& lt; option & gt; EUR & lt; / option & gt;
& lt; option & gt; RUB & lt; / option & gt;
& lt; option & gt; UAH & lt; / option & gt;
& lt; / select & gt;
& lt; / div & gt;