Question

我到目前为止做到了这一点：

<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" />');

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

编辑：如果有一种方法使按钮只能工作一次，那也会有所帮助。

Answer 1

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

    if($(select).val() === 'image 2') {
        $('#blah').prepend('<img id="image_2" src="image2.jpg" />');  
    }
}

Answer 2

尝试以下

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

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

Answer 3

请注意，<head>

中引用/加载了jQuery库

此答案不需要用户按下上传按钮...它会监视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>

如何在特定情况下展示某些东西

3 个答案: