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',

选择组合后重新加载div

1 个答案: