引导下拉列表将所选值链接到输入字段

我使用以下代码使用Boostrap Dropdown作为搜索表单。从下拉菜单中选择一个选项时，它会填充一个隐藏的输入字段，然后在提交表单时将其发布到 PHP 结果页面。

.HTML

<div id="search-form">
<form action="results.php" method="post">
<div class="btn-group">
<a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Location<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><input type="hidden" id="property_location" name="property_location" value=""></li>
<li><a href="#" data-value="#">Location</a></li>
<li><a href="#" data-value="City 1">City 1</a></li>
<li><a href="#" data-value="City 2">City 2</a></li>
<li><a href="#" data-value="City 3">City 3</a></li>
</ul></div>
<div class="btn-group">
<a class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Min Bedrooms<span class="caret"></span></a>
ul class="dropdown-menu">
<li><input type="hidden" id="property_rooms" name="property_rooms" value=""></li>
<li><a href="#" data-value="0">Min Bedrooms</a></li>
<li><a href="#" data-value="1">1</a></li>
<li><a href="#" data-value="2">2</a></li>
<li><a href="#" data-value="3">3</a></li>
</ul></div>
<div class="btn-group">
<a class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Min Price<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><input type="hidden" id="property_pricemin" name="property_pricemin" value=""></li>
<li><a href="#" data-value="0">Min Price</a></li>
<li><a href="#" data-value="100">100</a></li>
<li><a href="#" data-value="200">200</a></li>
</ul></div>
<div class="btn-group">
<a class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Max Price<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><input type="hidden" id="property_pricemax" name="property_pricemax" value=""></li>
<li><a href="#" data-value="1000">Max Price</a></li>
<li><a href="#" data-value="300">300</a></li>
<li><a href="#" data-value="500">500</a></li>
</ul></div>
<input type="submit" title="Search" class="btn-round" value="Search"/>
</form>     
</div>

爪哇语

$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
$('#property_location').val($(this).attr('data-value'));
});

上面的代码适用于第一个下拉菜单，但我在页面上还有另外三个下拉菜单，它们都需要填充一个单独的输入字段。每个输入字段都有一个单独的 ID，所以我尝试修改 JS 代码，如下所示，但是当选择任何选项时，这会更改所有四个下拉列表？

$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
$('#property_location').val($(this).attr('data-value'));
$('#property_rooms').val($(this).attr('data-value'));
$('#property_pricemin').val($(this).attr('data-value'));
$('#property_pricemax').val($(this).attr('data-value'));