显示图像与选择列表APEX

Display image with select list APEX

本文关键字：列表 APEX 选择 显示图 图像 显示      更新时间：2023-09-26

我有两个项目:一个选择列表和一个显示图像。Select List有三个值供用户选择。如果用户选择了其中一个值，那么图像视图将显示与所选值相关的图像，如果选择列表的所选值将切换也会更改图片。我试着把脚本放在页面的部分: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>

使用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"/>

相关文章：