Question

我需要一些选择选项的帮助。我有一个选择下拉列表，当选择或更改时，我需要图像不透明度从0.3到1，但CAN＆＃T; T使用选项的值作为它的预定义。有人可以帮忙吗？

这是（破碎的）脚本：

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

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

我认为这部分： if（document.getElementById（＆＃39; input_25_custom_1011_0＆＃39;）。selected == true）{

需要定义选择哪个选项...

Answer 1

添加img id [id =＆＃34; id_46＆＃34;]

使用select tag

的id更新窗口onload函数

[window.onload = function（）{ document.getElementById（＆＃39; input_25_custom_1011＆＃39;）。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.
  });      
});

Answer 2

您获取img（）函数的ID不正确。在window.load上，没有ID为input_25_custom_1011的元素。

检查这个小提琴。 http://jsfiddle.net/tqdjshae/

我用input_25_custom_1011替换了select标记上的ID，但它确实有效。

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

2 个答案: