javascript - 使用选择列表 APEX 显示图像

Question

我有两个项目:选择列表和显示图像。选择列表具有三个值供用户选择。如果用户选择其中一个值，则 ImageView 将显示与所选值相关的图像，如果选择列表的所选值将切换，也会更改图片。 我尝试将脚本放在页面的 JavaScript -> “函数和全局变量声明”部分，但没有运行。

<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

使用jquery on()就像，

$(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()更改图像 src，例如，

$(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"/>