根据下拉菜单更改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
});