3

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

            <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

4

1 回答 1

3

将代码包装在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',

于 2013-04-30T11:40:45.483 回答