更改表单字段名称的下拉菜单答案

【问题标题】：drop down menu that changes the name of a form field更改表单字段名称的下拉菜单
【发布时间】：2017-05-24 20:55:30
【问题描述】：

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

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

<form method="get" action="/search_results_advanced/" id="keyword">
    Search by name: <input type="text" name="name" value="" />
    Search by address: <input type="text" name="address" value="">
    Search by phone number: <input type="text" name="phone" value="">
    <input type="submit" value="Go!" /> 
</form>

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

例如：

<form method="get" action="/search_results_advanced/" id="keyword">
    Search by:
    <select id="DropDownSelection">
        <option>Name</option>
        <option>Address</option>
        <option>Phone</option>
    </select>
    <input type="text" name="?NAME_FROM_DROPDOWN_SELECTION?" value="" id="searchbar" size="25" /> 
    <input type="submit" value="Go!" /> 
</form>

如何使用下拉选择命名文本字段？我尝试修改通过谷歌找到的一些 javascript，但恐怕我根本不知道 javascript，也没有得到任何结果。

感谢您的帮助。

【问题讨论】：

你能把你试过的javascript包括进来吗？ Stackoverflow 旨在帮助您解决问题，而不是为您解决问题，因此您可能会更幸运地发布一些代码。

标签： javascript jquery html

【解决方案1】：

这是我使用 jQuery 制作的一个示例：

$(document).ready(function(){
	$('body').on('change','#DropDownSelection',function(){
		var v = $('#DropDownSelection').val();
		$('.search-by').html('Search by '+v+': <input type="text" name="'+v+'" value="">');
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="get" action="/search_results_advanced/" id="keyword">
    Search by:
    <select id="DropDownSelection">
        <option value="Name">Name</option>
        <option value="Address">Address</option>
        <option value="Phone">Phone</option>
    </select>
    <div class="search-by">Search by Name: <input type="text" name="Name" value=""></div>
    <input type="submit" value="Go!" /> 
</form>

【讨论】：

【解决方案2】：

如果你使用的是 jquery，那就很简单了：

<script>
    $(function() {
        $('#DropDownSelection').change(function() {
            $('#searchbar').attr('name', $('#DropDownSelection').val());
        });
    });
</script>

【讨论】：

【解决方案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'))
})

<form method="get" action="/search_results_advanced/" id="keyword">
    Search by:
    <select id="DropDownSelection">
        <option value="name">Name</option>
        <option value="address">Address</option>
        <option value="phone">Phone</option>
    </select>
    <input type="text" name="" value="" id="searchbar" size="25" /> 
    <input type="submit" value="Go!" /> 
</form>

【讨论】：