选择组合后重新加载 div

Question

我有两个下拉列表（选择、选项）。如果我更改其中一个，它应该立即显示不同的图像。

            <select id="1" class="selectpicker show-tick">
                <option value="70">70</option>
                <option value="80">80</option>
                <option value="90">90</option>
            </select>
            <select id="2" class="selectpicker show-tick">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>

            <embed id="mapembed" src="http://xyz.com/80_1.svg"type="image/svg+xml"/>

Javascript

<script type="text/javascript"> // that the select works
  window.onload=function(){
  $('.selectpicker').selectpicker();
  };
</script>

<script type="text/javascript">
$('#1, #2').change(function(event) {
    $('#mapshow').html("http://xyz.com/" + $('#1').val() + "_" + $('#2').val() + ".svg"); // to see if it works as text
    $('#mapembed').src("http:/xyz.com/" + $('#1').val() + "_" + $('#2').val() + ".svg"); // does not reload!
}); 
</script>

如果我使用 .html，它会在每次单击（更改）后将正确的路径显示为文本输出。但是 .src 并不会改变图像。

我正在使用 jquery、bootstrap 和 bootstrap-select

Answer 1

在document.ready 中包装代码。

<script type="text/javascript">
$(document).ready(function(){
    $('#1, #2, #3').change(function(event) {
        $('#mapshow').html("http://xyz.com/" + $('#1').val() + "_" + $('#2').val()
           + ".svg");
        $('#mapembed').attr('src',"http:/xyz.com/" + $('#1').val() + "_" + $('#2').val()
           + ".svg");
    }); 
});
</script>

并将.src(' 替换为.attr('src',