0

到目前为止，我已经这样做了：

<form>
Select image:
<select id="artwork">
  <option>image 1</option>
  <option>image 2</option>
  <option>image 3</option>
  <option>image 4</option>
  <option>image 5</option>
</select>
<input id="turnin" class="turnin" type="button" value="Upload" onclick="start()">
</form>


<script type="text/javascript">
    <!--
function start()
{
var select=document.getElementById('artwork');
var selected = select.options[select.selectedIndex].text;


  $('#blah').prepend('<img id="image_2" src="image2.jpg" />');  

};
    //-->
</script>

但是，我想要

$('#blah').prepend('<img id="image_2" src="image2.jpg" />');

部分仅在选项为“image 2”时生效。有没有办法做到这一点？

编辑：如果有办法让按钮只工作一次，那也会很有帮助。

4

3 回答 3

1 
function start() {
    var select = document.getElementById('artwork');

    if($(select).val() === 'image 2') {
        $('#blah').prepend('<img id="image_2" src="image2.jpg" />');  
    }
}
于 2013-06-20T16:03:35.427 回答
1

尝试关注

$('#artwork').on('change',function(){
if($(this).value=='image 2'){
    $('#blah').prepend('<img id="image_2" src="image2.jpg" />');
}});

您可以在此添加 else 并处理其他情况

于 2013-06-20T16:10:24.497 回答
0

请注意，jQuery 库在<head>

这个答案不需要用户按下上传按钮......它会监视select控件值的变化。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('#artwork').change(function() {
                    var sel = $(this).val();
                    if (sel == "image 2")
                        $('#blah').prepend('<img id="image_2" src="image2.jpg" />'); 
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <form>
    Select image:
    <select id="artwork">
      <option>image 1</option>
      <option>image 2</option>
      <option>image 3</option>
      <option>image 4</option>
      <option>image 5</option>
    </select>
    <input id="turnin" class="turnin" type="button" value="Upload">
    </form>

</body>
</html>

但是，如果您希望上传按钮触发操作，请修改如下：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('#turnin').click(function() {
                    var sel = $(this).val();
                    if (sel == "image 2")
                        $('#blah').prepend('<img id="image_2" src="image2.jpg" />'); 
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <form>
    Select image:
    <select id="artwork">
      <option>image 1</option>
      <option>image 2</option>
      <option>image 3</option>
      <option>image 4</option>
      <option>image 5</option>
    </select>
    <input id="turnin" class="turnin" type="button" value="Upload">
    </form>

</body>
</html>
于 2013-06-20T16:11:32.737 回答