jQuery从下拉列表中获取值不起作用

我有这样一个下拉列表：

<div id="search">
<select id="price-dropdown" class="form-control">
                                    <option value="0">-- Select Price --</option>
                                    <option value="1">$200,000 to $299,999</option><option value="3">$300,000 to $399,999</option><option value="5">$400,000 to $499,999</option><option value="8">$500,000+</option>                               </select>
</div>

但警报返回0…我做错了什么

我有4个下拉菜单，我试图从下拉菜单中获取所有值并将它们传递给函数：

$('#search').change(function() {
        var price = $('#price-dropdown').val();
        var type = $('#type-dropdown').val();
        var sqft = $('#sqft-dropdown').val();
        var modelName = $('#model-name-dropdown').val();
        getSearchResults(price, type, sqft, modelName);
    });

#search

是一个

div

元素，它没有

更改

事件。您需要钩住

上的事件，选择
。试试这个：


$（“#价格下拉列表”）.change（函数（）{
警报（$（this.val（））；
});

--选择价格--
200000至299999美元
300000至399999美元
400000至499999美元
$500,000+                               

这是可行的，但我的问题是我有5个下拉菜单，在更改时，我希望获得5个下拉菜单的所有值，并将它们传递给函数。
$('#search').change(function() {
        var price = $('#price-dropdown').val();
        var type = $('#type-dropdown').val();
        var sqft = $('#sqft-dropdown').val();
        var modelName = $('#model-name-dropdown').val();
        getSearchResults(price, type, sqft, modelName);
    });

$('#price-dropdown').change(function(){
  alert($(this).val());    
});