使用 select 列表 APEX 显示图像

Question

我有两个项目：Select 列表和显示图像。 Select 列表有三个值供用户选择。如果用户选择其中一个值，则 Image View 将显示与所选值相关的图像，如果 Select 列表的所选值将切换，也会更改图片。我尝试将脚本放在页面的 JavaScript -> "Function and Global Variable Declaration" 部分，而不是运行.

<script language="JavaScript" type="text/javascript">   
function setValueDisplayImage(){
    if ($("#SELECT_LIST").val() == 1) {
            $("#DISPLAY_IMAGE").val('http://www.some.com/img1.jpg');
    } else if ($("#SELECT_LIST").val() == 2) {
            $("#DISPLAY_IMAGE").val('https://www.some.com/img2.jpg');
    } else if ($("#SELECT_LIST").val() == 3){
            $("#DISPLAY_IMAGE").val('http://www.some.com/img3.jpg');
    } 
}</script>

Answer 1

使用jqueryon()喜欢，

$(function(){
    $("#SELECT_LIST").on('change', function(){
       var val=this.value;
       if(val==1 || val==2 || val==3){
           $("#DISPLAY_IMAGE").val('http://www.some.com/img'+val+'.jpg');
       }       
    });
});

$(function(){
    $("#SELECT_LIST").on('change', function(){
       var val=this.value;
       if(val==1 || val==2 || val==3){
           $("#DISPLAY_IMAGE").val('http://www.some.com/img'+val+'.jpg');
       }       
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="SELECT_LIST">
  <option value="1">First Image</option>
  <option value="2">Second Image</option>
  <option value="3">Third Image</option>
</select>
<br/>
<input id="DISPLAY_IMAGE" style="width:250px;"/>

并且如果您的 DISPLAY_IMAGE 元素是 img 那么您需要使用 attr() 来更改图像源，例如

$(function(){
    $("#SELECT_LIST").on('change', function(){
       var val=this.value;
       if(val){
           $("#DISPLAY_IMAGE").attr('src','http://placehold.it/250x'+val);
       }       
    }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="SELECT_LIST">
  <option value="">Select</option>
  <option value="100">First Image</option>
  <option value="150">Second Image</option>
  <option value="200">Third Image</option>
</select>
<br/>
<img id="DISPLAY_IMAGE"/>

使用 select 列表 APEX 显示图像

Display image with select list APEX

javascript

jquery

oracle-apex