Question

我有两个项目：选择列表和显示图像。选择列表有三个值供用户选择。如果用户选择了值，则图像视图将显示具有所选值的相关图像，如果选择列表的选定值将切换，则也会更改图片。我尝试将脚本放在以下部分：JavaScript - ＆gt; ＆＃34;功能和全局变量声明＆＃34;页面，但没有运行。

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

使用选择列表APEX显示图像

1 个答案: