Question

现在我正在做一些工作，而我并不是真正的编码人员，所以我对此有些困难。因此，基本上，我有4个选择列表，如下所示：

<img class="stylephoto" id="image" src="Null_Image.png" />
<table class="styletable">

  <select class="styleclass" id="fencelist">
    <option selected disabled hidden>Choose here</option>
    <option value="Arrow">Arrow</option>
  </select>

  <select class="styleclass" id="stylelist">
    <option selected disabled hidden>Choose here</option>
    <option value="Fence">Fence</option>
    <option value="1 Door Gate">1 Door Gate</option>
    <option value="2 Door Gate">2 Door Gate</option>
  </select>`

  <select class="styleclass" id="panellist">
    <option selected disabled hidden>Choose here</option>
    <option value="Spear">Spear</option>
    <option value="Triad">Triad</option>
  </select>

  <select class="styleclass" id="raillist">
    <option selected disabled hidden>Choose here</option>
    <option value="Scroll">Scroll</option>
    <option value="Circle">Circle</option>
    <option value="X">X</option>
  </select>

我使用javascript做到了这一点，以便根据第一选择的选择值（id = {fencelist），该照片将显示另一张照片。

var changeimage = function() {
  document.getElementById('image').src =
    this.options[this.selectedIndex].value + "_Image.png"
}
fencelist = document.getElementById('fencelist');
fencelist.addEventListener('change', changeimage, false);

基本上，我希望所有选择都可以更改图片的显示，因此，我希望它不仅仅是Arrow_Image.png，而不仅仅是ArrowFenceSpearScroll_Image.png。

我希望这个解释足够了，感谢您的帮助。

Answer 1

JS中的此关键字用于指向对象Environment / function Environment，因此此处仅指向id =“ fencelist” ...的选择。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activities.MainActivity">

<fragment
    android:id="@+id/fragmentMainActivityMail"
    android:name="com.jfarias.mymaillab09.Fragments.MailFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout="@layout/fragment_mail">

</fragment>
</android.support.constraint.ConstraintLayout>

希望这对您有用...

Answer 2

将类而不是ID用于事件侦听器。您不能通过ID调用多个元素。
请检查以下代码

HTML

JS

根据多个选择列表显示特定的图片

2 个答案: