教えて!gooグレードポイントがdポイントに!

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

質問者からの補足コメント

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

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

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

      補足日時:2022/04/02 11:47
教えて!goo グレード

A 回答 (3件)

こんにちは



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

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

<!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>
    • good
    • 0
この回答へのお礼

組み合わせ方法も含め
無知による質問、失礼いたしました。
例を参考にさせて頂きます。
ありがとうございます。

お礼日時:2022/04/02 13:58

> どのようなコードになりますでしょうか?



逆にどのようなソースからどのような結果を希望しているのでしょうか?
    • good
    • 0

・セレクトボックスを2つつくる


・組み合わせをきめる
・表示する
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

教えて!goo グレード

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング