Вставить изображение, когда выбран вход

0

Я хочу, чтобы, когда я выбрал выбранный вариант ввода, чтобы отобразить мое изображение желания над ним, в DIV.

См. Здесь код: http://jsfiddle.net/rami7250/7qkmg/

См. Пример изображения здесь (Unselected): 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>

  • 0
    изображение будет динамически или просто скрыто, и вы хотите показать его
  • 0
    Где находится <DIV> в котором вы хотите отобразить нужное изображение?
Показать ещё 5 комментариев
Теги:

2 ответа

0
Лучший ответ

Это простой пример, в котором есть только одна возможность дать вам представление
скрипка

<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>
Поделиться
  • 0
    Я действительно не знаю почему, но в JSfiddle это работает, но на моей HTML-странице это не так. Может быть проблема в том, что что-то принадлежит onDomready
  • 0
    ХОРОШО. Теперь это работает, но я изменяю расположение div, и изображения остаются на том же месте - под входом, а не над ним. Смотрите здесь: jsfiddle.net/rami7250/353uJ/3
Показать ещё 1 комментарий
0

С головы до ног я могу придумать несколько предложений:

1) Добавьте пустой тег 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';
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню