根据下拉菜单更改DOM

Question

我正在尝试做些骇人听闻的事情，不确定如何去做。

我在网页上注入了一个下拉菜单

var myObj = $("<form action='action_page.php'>" +
    "<select name='cars'>" +
    "<option value='volvo'>Volvo</option>" +
    "<option value='saab'>Saab</option>" + 
    "<option value='fiat'>Fiat</option>" +
    "<option value='audi'>Audi</option>" +
    "</select>" +
    "</form>")

$('.location').append(myObj)

当页面基于其他数据加载时，我将设置初始选项值。

因此，例如，我正在浏览汽车资料，一些后端服务猜测汽车的类型。

加载页面后，下拉值设置为Volvo 。 但是，这是错误的，实际上是Saab 。 因此，我将下拉菜单上的选项更改为Saab 。

有没有一种方法可以在DOM中反映此更改而不必单击提交按钮？

Answer 1

使用jQuery添加事件监听器：

$('.location').append(myObj)
$('select[name=cars]').change(function() {
    var selectedCar = $(this).val();
    // update DOM based on selectedCar
});