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');
        }
    });
});

现在，当用户更改选择列表时没有任何反应。我试图用＆lt; img＆gt;做到这一点标记而不是CSS，以便增加alt =＆＃34;＆＃34;的可访问性。属性。

我刚刚开始掌握javascript / jQuery ...任何帮助表示赞赏。

这是一个小提琴：

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。

Answer 2

HTML

<select id="branch-number" class="form-control">
  <optgroup label="British Columbia">
    <option>1</option>
    <option>2</option>
    <option>Three</option>
    <option>Four</option>
  </optgroup>
</select>

的jQuery

$(document).ready(function() {

  $('#branch-number').on('change', function() {

    // var branchVal = $('this').val();
    var branchVal = $('#branch-number').find(':selected').text();

    switch(branchVal) {
        case "1":
        $('#branch-img').attr('src', 'http://placehold.it/350x350/9d9999/000000&text=Abbotsford+Branch');
        break;
        case "2":
        $('#branch-img').attr('src', 'http://placehold.it/250x250/9d9999/000000&text=Chilliwack+Branch');
        break;
        case "Three":
        $('#branch-img').attr('src', 'http://placehold.it/150x150/9d9999/000000&text=Mission+Branch');
        break;
        case "Four":
        $('#branch-img').attr('src', 'http://placehold.it/350x350/9d9999/000000&text=Vancouver+Branch');
        break;
    }

  });

});

必须使用.find（：selected）.text（）;方法而不是.val（）;方法。这是因为value属性仅用于表单和其他内容，但不是用于框。

使用jQuery获取每个更改的选择列表的值

2 个答案: