javascript - 使用jQuery获得选择列表的每个更改的值

我有一个选择列表，我希望用户每次更改选择列表时都在同一div中显示不同的图像。这是我到目前为止的内容：

的HTML

<div id="branches">
    <h3>British Columbia Old Age Pensioners' Organization &mdash; Branches</h3>

    <select id="branch-number" class="form-control">
      <optgroup label="British Columbia">
        <option value="1">Branch 1</option>
        <option value="2">Branch 2</option>
        <option value="http://placehold.it/350x350">Branch 3</option>
        <option value="http://placehold.it/350x450">Branch 4</option>
      </optgroup>
      <optgroup label="Alberta">
        <option value="5">Branch 5</option>
        <option value="6">Branch 6</option>
        ...etc...
    </select>

    <div id="img-window">
      <img id="branch-img" src="http://placehold.it/350x150" class="img-responsive">
    </div><!-- end img-window -->

</div><!-- end branches -->

jQuery的

$(document).ready(function () {
    $('#branch-number').on('change', function () {
        alert('something happened');
        // var branchVal = $('this').val();
        var branchVal = $('option:selected').val();
        switch (branchVal) {
        case 1:
            $('#branch-img').attr('src', 'http://placehold.it/150x150');
            break;
        case 2:
            $('#branch-img').attr('src', 'http://placehold.it/250x250');
            break;
        case 3:
            $('#branch-img').attr('src', 'http://placehold.it/350x350');
            break;
        default:
            $('#branch-img').attr('src', 'http://placehold.it/1450x1450');
        }
    });
});

现在，当用户更改选择列表时，什么也没有发生。我正在尝试使用标记而不是CSS来执行此操作，以便提高alt =“”属性的可访问性。

我才刚开始了解javascript / jQuery的窍门...任何帮助表示赞赏。

这是一个小提琴：


  https://jsfiddle.net/r1fcvs7s/4/


编辑：语法现在应该很好。

最佳答案

您的case语法错误。它应该是：

switch(branchVal) {
    case 1:
        $('#branch-img').attr('src', 'http://placehold.it/150x150');
        break;
    case 2:
        $('#branch-img').attr('src', 'http://placehold.it/450x450');
        break;
}

:在值之后，而不是之前。并且在案例之间需要break，除非您希望进入下一个案例（显然您不在此代码中）。

您应该在Javascript控制台中遇到语法错误。你是怎么想念的？

顺便说一句，要获取<select>的值，可以使用$(this).val()。您不需要访问option:selected。