根据选定的下拉菜单选项更改占位符文本的一部分

【问题标题】：Change a portion of placeholder text based on selected dropdown menu options根据选定的下拉菜单选项更改占位符文本的一部分
【发布时间】：2020-07-21 03:32:40
【问题描述】：

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"/>

在这里，我创建了一个下拉菜单（带有选项 A、B 和 C）和一个搜索栏，其中占位符为“搜索有关数据库 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'.

是否可以更改占位符文本的一部分，即如果选择选项 B，则占位符文本更改为“搜索有关数据库 B 的完整详细信息”，仅将文本 'A' 替换为 'B' 。请帮我处理 jQuery 代码。

【问题讨论】：

标签： html jquery drop-down-menu placeholder

【解决方案1】：

一种方法是使用数据属性来保存模板值并使用占位符字符，当<select> 更改时，您可以使用字符串替换（）。

然后替换更改事件处理程序中的属性

$('#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 _"/>

【讨论】：

非常感谢。