Question

我使用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>

的Javascript

$(".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'));

Answer 1

不知道为什么要选择所有隐藏的输入并将当前值放在所有隐藏输入中。

你需要这样做：

$(this).parents(".dropdown-menu").find("input").val($(this).attr('data-value'));

这样，您只需填充当前下拉列表中隐藏的输入值

Bootstrap Dropdown将选定值链接到输入字段

1 个答案: