select 更改图像不透明度的选项

Question

我需要一些关于 select 选项的帮助。我有一个 select 下拉列表，当 selected 或 onchange 我需要图像不透明度从 0.3 变为 1，但不能使用预定义选项的值。有人可以帮忙吗？

这是（损坏的）脚本：

<script type="text/javascript">
window.onload = function() {
document.getElementById('input_25_custom_1011_0').onchange = img }

function img(){
if (document.getElementById('input_25_custom_1011_0').selected == true ){
document.getElementById('id_46').style.opacity = "1"; }
else { 
document.getElementById('id_46').style.opacity = "0.3"; }
}
</script>

和相关的 html:

<img alt="" class="form-image" border="0" src="http://www.jotform.com/uploads/TeckStyle/form_files/frame.png" height="334" width="225" />

      <select class="form-dropdown validate[required]" name="q25_input25[special_1011][item_0]" id="input_25_custom_1011_0">
        <option value="Standard"> Standard </option>
        <option value="Standard &amp; Rider 1"> Standard &amp; Rider 1 </option>
        <option value="Standard &amp; Rider 2"> Standard &amp; Rider 2 </option>
        <option value="Standard, Rider 1 &amp; 2"> Standard, Rider 1 &amp; 2 </option>
      </select>

编辑：更新并更正了输入元素。

我认为部分：如果 (document.getElementById('input_25_custom_1011_0').selected == true ){

需要定义哪个选项是selected...

Answer 1

您获取 img() 函数的 ID 不正确。 window.load 上没有 ID 为 input_25_custom_1011 的元素。

检查此 fiddle。 http://jsfiddle.net/tqdjshae/

我用 input_25_custom_1011 替换了 select 标签上的 ID，它起作用了。

Answer 2

添加 img id [id="id_46"]

使用 select 标签的 ID 更新您的 window onload 函数

[window.onload = 函数() { document.getElementById('input_25_custom_1011').onchange = img }]

  <img alt="" id="id_46" class="form-image" border="0" src="http://www.jotform.com/uploads/TeckStyle/form_files/frame.png" height="334" width="225" />

        <select class="form-dropdown validate[required]" name="q25_input25[special_1011][item_0]" id="input_25_custom_1011_0">
          <option value="Standard"> Standard </option>
          <option value="Standard &amp; Rider 1"> Standard &amp; Rider 1 </option>
          <option value="Standard &amp; Rider 2"> Standard &amp; Rider 2 </option>
          <option value="Standard, Rider 1 &amp; 2"> Standard, Rider 1 &amp; 2 </option>
        </select>
</body>

  <script type="text/javascript">    

    window.onload = function() {
document.getElementById('input_25_custom_1011_0').onchange = img }

function img(){
if (document.getElementById('input_25_custom_1011_0').selected == true ){
document.getElementById('id_46').style.opacity = "1"; }
else { 
document.getElementById('id_46').style.opacity = "0.3"; }
}


</script>

如果您正在使用 jQuery，您也可以使用以下脚本

$("#input_25_custom_1011_0").on("change",function(){      

   $("img" ).fadeTo( "slow" , 0.3, function() {
      // Add your animation logic here.         
     // Animation done.
  });      
});

select 更改图像不透明度的选项

select option to change image opacity

javascript

jquery

onchange

opacity