0

ユーザーが要素で を選択したときに、リンクと画像の 2 つを変更しようとして<option>い<select>ます。

<select onchange="document.getElementById('pagelink').href = this.link; document.getElementById('image').src = this.value">
    <option link="test.html" value="selectedimage.png">Text</option>
    <option>Another option</option>
</select>
<a id="pagelink"></a>
<img id="image" src="temp.png"/>

この回答からこの手法を採用しました。

ご覧のとおり、主な問題は、「リンク」が完全にでっち上げで機能しないことです。そのため、リンクは常にデフォルトで「未定義」になります。残念ながら、2 つの「値」を持つことはできず、「ラベル」を使用しても機能しません。

私が JavaScript についてあまり詳しくないことがわかるかもしれません。使用できる「値」に代わるもの、または新しい同様の要素を定義する方法はありますか?

4

2 に答える 2

3

これを試して：

data-linkの代わりに使用してください。link使用する慣例data-です。.getAttribute()を使用して、 内の情報を取得できますdata-link。

HTML

<select id="selector">
    <option data-link="test.html" value="selectedimage.png">Text</option>
    <option data-link="test2.html" value="selectedimage2.png">Text2</option>
</select>

Javascript

document.getElementById('selector').onchange = function () {
    document.getElementById('pagelink').href = this.options[this.selectedIndex].getAttribute('data-link');
    document.getElementById('image').src = this.value
}

デモはこちら

#selectorまた、インライン コードを削除し、selectに ID を付けました。このように、HTML の途中ではなく、適切な場所に JavaScript を配置できます。

于 2013-10-08T20:23:34.097 に答える