Question

我正在尝试制作一个下拉菜单，调用使用外部Javascript函数/文件，并根据用户的选择交替显示图片但由于某种原因图片不会改变。下拉菜单显示以及默认图像，因为它是硬编码但图片没有变化。这是我第一次使用JavaScript，所以我确定它充满了错误，但任何帮助都会受到赞赏。我真的不知道我在做什么

这是HTML：

function changepic(season){
    switch (season){
        case 'winter': document.getElementById('myimage').src='winter.jpg';
        break;

        case 'spring': document.getElementById('myimage').src='spring.jpg';
        break;

        case 'summer': document.getElementById('myimage').src='summer.jpg';
        break;

        case 'fall': document.getElementById('myimage').src='fall.jpg';
        break;
    }

这是JavaScript：

$result= mysqli_query($con, "INSERT INTO signup (name, email,password, address,cell_phone_number, heard_from,money_time, fav_artist,fav_city,security_question, pro,pro_acc_name, pro_acc_password,pro_acc_number, se_acc_name,se_acc_pass, se_ac_number,rec_contract_copy, rec_label_copy,role) VALUES ('$name', '$email', '$password', '$address', '$number', '$hear', '$money', '$artist', '$security', '$city', '$pro', '$role', '$accname', '$accpass', '$accno', '$seaccname', '$seaccpass', '$seaccno', '$contracts', '$statements')");

Answer 1

最佳做法是将<script>标记放在<head></head>

中

使用原生Javascript，您可以这样做：

function changepic(season) {
  switch (season) {
    case 'winter': document.getElementById('myimage').src='https://s1.postimg.org/40ndqhnyfv/image.jpg';
    break;
				
    case 'spring': document.getElementById('myimage').src='https://s1.postimg.org/85iz2llc8b/image.jpg';
    break;

    case 'summer': document.getElementById('myimage').src='https://s1.postimg.org/40ndqhnyfv/image.jpg';
    break;

    case 'fall': document.getElementById('myimage').src='https://s1.postimg.org/85iz2llc8b/image.jpg';
    break;      
  }

  console.log('Current image is : ' + document.getElementById('myimage').src);
}

<img id="myimage" src="https://s1.postimg.org/40ndqhnyfv/image.jpg" id="myimage"/>
<select name="seasons" onChange="changepic(this.value)">
    <option value="winter">Winter</option>
    <option value="spring">Spring</option>
    <option value="summer">Summer</option>
    <option value="fall">Fall</option>
</select>

确保图像与脚本位于同一文件夹中，或者它们位于路径正确的另一个目录中

Answer 2

不建议将按钮放在选择下拉选项中。您应该在select元素上收听change()事件并在那里进行处理。在更改功能中，您可以通过向所有选项添加option属性轻松访问下拉列表中所选的value。

因此，change事件的代码如下所示 -

$(document).ready(function() {
  $('#seasonsDropdown').change(function() {
    var seasonValue = document.getElementById('seasonsDropdown').value;
    switch(seasonValue) {
      case 'winter': document.getElementById('myimage').src='winter.jpg';
      break;

      case 'spring': document.getElementById('myimage').src='spring.jpg';
      break;

      case 'summer': document.getElementById('myimage').src='summer.jpg';
      break;

      case 'fall': document.getElementById('myimage').src='fall.jpg';
      break;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "allseasons.js"></script>
<img id="myimage" src="winter.jpg" alt="current season." />
<select name="seasons" id="seasonsDropdown">
    <option value="winter">Winter</option>
    <option value="spring">Spring</option>
    <option value="summer">Summer</option>
    <option value="fall">Fall</option>
</select>

外部JavaScript和下拉菜单无法在浏览器中正确呈现

2 个答案: