下拉菜单，用于更改表单字段的名称

我正在创建一个高级搜索表单，并希望通过下拉菜单设置文本输入字段的名称。

这是一个包含三个单独字段的简单搜索表单：

 Search by name:  Search by address:  Search by phone number:    

我想要做的是让用户从下拉列表中选择一个字段，然后使用单个文本输入框输入搜索词。

例如：

 
 Search by:  Name Address Phone     

如何使用下拉列表选择命名文本字段？ 我尝试修改我通过谷歌找到的一些javascript但我恐怕我根本就不知道javascript并且没有得到任何地方。

谢谢你的帮助。

Answer 1

这是我使用jQuery做的一个例子：

 $(document).ready(function(){ $('body').on('change','#DropDownSelection',function(){ var v = $('#DropDownSelection').val(); $('.search-by').html('Search by '+v+': '); }); }); 

  
 Search by:  Name Address Phone  
Search by Name: 
   

Answer 2

如果你正在使用jquery，那很简单：

Answer 3

您可以为每个option设置value ，并在下拉列表中收听change事件：

 var dd = document.getElementById('DropDownSelection'); var input = document.getElementById('searchbar'); input.setAttribute('name', 'name'); // default value dd.addEventListener('change', function(e) { input.setAttribute('name', e.target.value); // set input.name equal to chosen select.value console.log(input.getAttribute('name')) }) 

 
 Search by:  Name Address Phone