3

2 つのドロップダウンリスト (選択、オプション) があります。これらのいずれかを変更すると、すぐに別の画像が表示されるはずです。

            <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 に答える