Solution 1 :

One way is use a data attribute to hold the template value and use a placeholder character that you can use a string replace() on when <select> changes.

Then replace the attribute inside a change event handler

$('#alphalist').change(function(){
    const dbText = $(this).find(':selected').text();
    
    $('#id1').attr('placeholder', function(){
        return $(this).data('placeholder').replace('_', dbText)
    });
  // trigger change on page load to set initial placeholder
}).change()
input{width:100%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select Database:
  <select class="dropdown" id="alphalist">   
         <option value="a" selected> A </option>   
         <option value="b"> B </option>
         <option value="c"> C </option>
  </select> 
  <br/> <br/> <br/>
  <input type="text" class="c1" id="id1" data-placeholder="Search full deatils about Database _"/>

Problem :

HTML

  Select Database:
  <select class="dropdown" id="alphalist">   
         <option value="a" selected> A </option>   
         <option value="b"> B </option>
         <option value="c"> C </option>
  </select> 
  <input type="text" class="c1" id="id1" placeholder="Search full details about Database A"/>

Here I created a drop down menu(with options A, B & C) and a search bar with placeholder as ‘Search full details about Database A’.

Now I need to change place holder text as ‘Search full details about Database B’ when option B is selected and for option C placeholder text should be changed to ‘Search full details about Database C’.

Is it possible to change a portion of placeholder text i.e. if option B is selected, placeholder text is changed to ‘Search full details about Database B’ by replacing only the text ‘A’ with ‘B’ . Please help me with jQuery code.

Comments

Comment posted by Eoin

Thanks you very much.

By