Question

您好，我选择了通过搜索来更改一个预览图像，但是有一个问题 ... 当我更改选择时，图像保持不变。

<script type="text/javascript">
function numeroImage() {
  var pays = document.getElementById('idSelect').value;
  document.getElementById('image').value=pays;
  document.getElementById('imagePreview').src="flags/Flag_"+pays+".png";
}
</script>

</head>

<body>

<select id="idSelect" onchange="numeroImage()">
    <option value="france">France</option>
    <option value="belgique">Belgique</option>
    <option value="suisse">Suisse</option>
    <option value="allemagne">Allemagne</option>
</select>

<br/>
<br/>

<div id="preview">
    <img height="75" weidth="100" src="flags/Flag_france.png" id="imagePreview">
</div>


</body>

Answer 1

尝试以下Jquery代码：

<html>
    <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <select id="idSelect">
            <option value="france">France</option>
            <option value="belgique">Belgique</option>
            <option value="suisse">Suisse</option>
            <option value="allemagne">Allemagne</option>
        </select>
        <br/>
        <br/>
        <div id="preview">
            <img height="75" weidth="100" src="flags/Flag_france.png" id="imagePreview">
        </div>
        <script type="text/javascript">
            $(document).ready(function($){
                $(document).on("change","#idSelect",function(){
                    var image = $(this).val();
                    var image_path ="flags/Flag_"+image+".png";
                    $("#imagePreview").attr("src",image_path);
                });
            });
        </script>
    </body>
</html>

尝试以下javascript代码：

<html>
    <head>
        <script type="text/javascript">
            function numeroImage() {
              var pays = document.getElementById('idSelect').value;
              document.getElementById('imagePreview').src="flags/Flag_"+pays+".png";;
            }
        </script>
    </head>
    <body>
        <select id="idSelect" onchange="numeroImage()">
            <option value="france">France</option>
            <option value="belgique">Belgique</option>
            <option value="suisse">Suisse</option>
            <option value="allemagne">Allemagne</option>
        </select>
        <br/>
        <br/>
        <div id="preview">
            <img height="75" weidth="100" src="flags/Flag_france.png" id="imagePreview">
        </div>
    </body>
</html>

Answer 2

您需要删除行document.getElementById（'image'）。value = pays;

选择图像源

2 个答案: