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

Question

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）和一个带有占位符 'Search full details about Database A' 的搜索栏。

现在我需要在选择选项 B 时将占位符文本更改为 'Search full details about Database B'，对于选项 C，占位符文本应更改为 'Search full details about Database C'。

是否可以更改占位符文本的一部分，即如果选择选项 B，通过仅将文本 'A' 替换为 'B'，占位符文本将更改为 'Search full details about Database B'。请帮我 jQuery 代码。

Answer 1

一种方法是使用数据属性来保存模板值并使用占位符，您可以在 <select> 更改时使用字符串 replace()。

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

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

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

Change a portion of placeholder text based on selected dropdown menu options

html

jquery

placeholder

drop-down-menu