HTML,JS初心者です。 2つのselectボックスが有りその選択の組み合わせにより指定した文

解決済

質問者：hola-
質問日時：2022/03/31 23:35
回答数：3件

HTML,JS初心者です。
2つのselectボックスが有り
その選択の組み合わせにより
指定した文字を表示する方法を
教えて頂けないでしょうか？
宜しくお願いします。

ちなみに組み合わせと
組み合わせによる
表示は
どのようなコードになりますでしょうか？

補足日時：2022/04/01 12:41
通報する
HTMLにて2つのプルダウンメニュー用意しておき
ブラウザ画面で
2つのプルダウンメニューから項目を選択
jsで2つのプルダウンメニューのidを取得して
取得した組み合わせに応じて
ブラウザにメッセージを表示させたいのですが

jsで2つの異なるidを取得して
その組合せを
HTMLで用意した組み合わせに応じた
メッセージを表示させたら良いか
分からずです。

補足日時：2022/04/02 11:47
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2022/04/02 13:32

こんにちは

抽象的に同じ説明を繰り返しているようですけれど、「組み合わせる」方法はいくらでもあり得るので、それによってスクリプトは変わってくることになります。
ですので、内容が抽象的なままで具体的なものを求められても、回答しようがないということです。

などと言っても意味が伝わらないかも知れませんので、以下に簡単な例を挙げておきます。
これでなさりたいものが作れるとも思えませんし、お考えの内容とは多分違うでしょうけれど、ご質問の抽象的な内容には合っていると思いますので・・

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="hoge">
<select name="lang">
<option value="">--</option>
<option value="1">日本語</option>
<option value="2">英語</option>
<option value="3">スペイン語</option>
</select>
<select name="animal">
<option value="">--</option>
<option value="1">いぬ</option>
<option value="2">ねこ</option>
<option value="3">さる</option>
</select>
<p>
<output></output>
</p>
</div>

<script>
{
const
dat = ['犬,dog,perro', '猫,cat,gato', '猿,monkey,mono'],
data = dat.map( d=> d.split(',') ),
hoge = document.getElementById('hoge'),
sel = hoge.querySelectorAll('select'),
changeHandler = e => {
const
s = [...sel].map( s => s.value ),
c = [...sel].map( s => s.options[s.selectedIndex].textContent ),
out =(s[0] && s[1])?`${c[0]}で${c[1]}は「${data[s[1]-1][s[0]-1]}」です。`:'';
hoge.querySelector('output').textContent = out;
};
hoge.addEventListener('change', changeHandler);
}
</script>
</body>
</html>