How to make sure that when choosing, for example, the США , the words of the Выбранная страна remain. That is, the Выбранная страна: must always be inside, regardless of the choice of country.

 <select name="country"> <option value disabled selected>Выбранная страна: Россия</option> <option>Россия</option> <option>США</option> <option>Турция</option> <option>Китай</option> </select>

  • You can't do without js - Cheg
  • Have examples on js? I just can't google it even - YourDeveloper
  • There are no examples, but you can write yourself - Cheg
  • 2
    You can try to make another 1 element with the text "Selected country:" with absolute positioning in the right place, and inside the select, add an indent to the left. - Sapphiron

1 answer 1

You can do this:

  1. we place select in the separate container, for example, .block ;

  2. add another block to .block , for example .placeholder , in which we will output the text "Selected country:" + text of the selected option , and place it on top of select ;

  3. for .placeholder in css we specify pointer-events:none; not to click on select

On 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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block"> <div class="placeholder" data-text="Выбранная страна: "></div> <select name="country"> <option>Россия</option> <option>США</option> <option>Турция</option> <option>Китай</option> </select> </div><br /><br /> <div class="block"> <div class="placeholder" data-text="Выбранный тип аккаунта: "></div> <select name="type"> <option>Бесплатный</option> <option>Профессиональный</option> <option>Для бизнеса</option> </select> </div><br /><br /> <div class="block"> <div class="placeholder" data-text="Выбранная валюта: "></div> <select name="currency"> <option>USD</option> <option>EUR</option> <option>RUB</option> <option>UAH</option> </select> </div>