javascript - 根据 2 个下拉菜单中的选择更改图像

Question

我有两个 select 元素:

<select class="form-control" id="shape" name="shape">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
  <option value="d">d</option>
  <option value="e">e</option>
  <option value="f">f</option>
</select>

第二个显示第一个的子类别:

<select class="form-control" id="waist" name="waist">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

这些是用于其他操作的 form 的一部分，它们的名称和值可以更改。

在我的数据库中，我有 a-1、a-2、a-3、b-1, b-2, b-3, c-1, c-2, >c-3 等等。我有一个图像空间，一旦从两个 select 元素中选择了选项，就应该更新这些图像。

我看过很多表格，但他们只使用了一个下拉菜单。我对 javascript 有点陌生，所以有人可以帮忙吗？如果需要，您可以使用 PHP。

Answer 1

您需要编写一个函数，该函数在 select 元素的 change 事件上调用，连接图像文件名并更新 src所需 img 的属性，如下所示:

$('select.form-control').change(function() {
    var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
    $('#imgToChange').prop('src', filename);
});