Question

当我选择输入所选选项时，我希望在DIV中显示我想要的图像。

请参阅此处的代码：http://jsfiddle.net/rami7250/7qkmg/

请参阅此处的图片示例（未选中）：http://oi60.tinypic.com/2isiohi.jpg

<table width="600">
<tr>
    <td width="200">
        <label for="select-song">Select your favourite song</label>
    </td>
    <td width="200">            
        <label for="select-gender">Select gender</label>
    </td>
    <td width="100">
        <label for="your-mood">Your mood</label>
    </td>
    <td width="100"> 
    </td>
</tr>
<tr>
    <td>
        <select name="song" id="select-song" class="input-step">
            <option value="">Select song</option>
            <option value="Katyusha">Katyusha</option>
            <option value="Gangnam style">Gangnam style</option>
        </select>
    </td>
    <td>            
        <select name="gender" id="select-gender" class="input-step">
            <option>Select gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </td>
    <td>
         <select name="gender" id="select-gender" class="input-step">
            <option>Select gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </td>

</tr>

Answer 1

这只是一个简单的例子，只有一个选项可以给你一个想法 Fiddle

<script type="text/javascript">
$(document).ready(function(){
    $('#select-song').on('change',function(){
        $('#show img').remove()
        var img=$('option:selected').val()
        $('<img>').attr('src',img).appendTo('#show')
        })

})
</script>

如果此解决方案不符合您的需求，我会为您浪费时间而道歉我把所有代码传给你这是一个有效的在线页面链接：http://www.videmadesign.herobo.com/stak1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>test</title>
    <style type="text/css">
    .hidden {
    display: none;
    }

    table {
        border: 1px dashed #999;
    }

    table td {
        padding: 5px;
        border: 1px dashed #999;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--in fiddle you have select domready event from sx tabs but you have no insert in the script-->
    <!--if you put the script in the javascript section of fiddle page you can not insert domready event in the script-->
    <!--but if you put the script in html section of fiddle page you have to insert domready event in the script-->
    <script type="text/javascript">
    /*document ready event you forgot*/
    $(document).ready(function(){
        $('#select-song').on('change',function(){
            $('#show img').remove()
            var img=$('option:selected').val()
            $('<img>').attr('src',img).appendTo('#show')
        })
    })
    </script>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
      <table width="600">
        <tr>
            <td width="200">
                <label for="select-song">Select your favourite song</label>
            </td>
      </tr>
        <tr>
            <td>
                <select name="song" id="select-song" class="input-step">
                    <option value=""></option> 
                  <option value="http://s25.postimg.org/5fhbardwb/mini_botti.jpg">aaa</option>
                  <option value="http://s25.postimg.org/3oya99wd7/mini_topo.jpg">bbb</option>
                  <option value="http://s25.postimg.org/3u0pkd1cr/minigatto.jpg">ccc</option>
                </select>
            </td>
        </tr>
    </table>
    <div id="show"></div>
</body>
</html>

Answer 2

我能想到一些建议：

1）在您希望图像显示的每个表格单元格中添加一个带有id的空img标记。例如，在“选择您的心情”单元格中，请更改为以下内容：

<td width="100">
    <label for="your-mood">Your mood</label>
    <img id="mood" src="" />
</td>

2）添加一些jquery代码，在其中将事件添加到选择列表，隔离选择了哪个选项，并将图像附加到表格单元格中的div。有点像这样：

$('#select-mood').on('change', function() {
    var selected = $(this).find('option:selected').val();
    $('#mood).attr('src') = selected + '.jpg';
});

选择输入时插入图像

2 个答案: