Question

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

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

<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而且没有到达任何地方。

感谢您的帮助。

Answer 1

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

＆＃13;

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'))
})

＆＃13;

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

＆＃13;

Answer 2

以下是我使用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>

Answer 3

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

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

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

3 个答案: