javascript - 使用 jQuery 获取选择列表每次更改的值

Question

我有一个选择列表，我希望每次用户更改选择列表时在同一 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 ...任何帮助。

这是一个 fiddle :

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

编辑:语法现在应该没问题了。

Answer 1

您的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 .