Javascript 基于一个下拉选择填充多个内容

我在互联网上找到了以下示例：

函数下拉提示（值）{
console.log（值）；
document.getElementById（“结果”）.innerHTML=value；
}
果实
蔬菜
动物
全部的

我已经为自己的使用稍微调整了一下，并设法把它放在一张桌子上。但问题是，我希望基于一个选择得到多个结果

因此，如果一个人在下拉列表中选择“Cat”，我想填充a、B、C和D，而不仅仅是a

如果有人能帮我解决这个问题就好了

---

提前感谢

如果您可以使用jquery，并且如果A、B、C和D都是div，如“result”，请尝试以下操作：

HTML

A、 B、C和D将显示所选选项的值

---

我认为您应该使用jquery来实现这一点，这将简化事情，但如果您想使用javascript，您仍然可以使用它

html

JSFIDLE

---

希望有助于

提琴：

function dropdownTip(value){
    var myMap = {test1: ["10","20","30","10"],test2: ["20","22","31","11"],test3: ["11","24","31","44"],test4: ["12","21","34","14"]}
    var elements = document.getElementsByClassName("result");
    var len = elements.length;
    for(var i=0;i<len;i++){
        elements[i].innerHTML = eval("myMap."+value+"["+i+"]");
    }

function dropdownTip(value){
    var myMap = {test1: ["10","20","30","10"],test2: ["20","22","31","11"],test3: ["11","24","31","44"],test4: ["12","21","34","14"]}
    $(".result").each(function(i,e){
        $(this).html(eval("myMap."+value+"["+i+"]"));
    });
}

javscript:

function dropdownTip(value){
    var myMap = {test1: ["10","20","30","10"],test2: ["20","22","31","11"],test3: ["11","24","31","44"],test4: ["12","21","34","14"]}
    var elements = document.getElementsByClassName("result");
    var len = elements.length;
    for(var i=0;i<len;i++){
        elements[i].innerHTML = eval("myMap."+value+"["+i+"]");
    }

function dropdownTip(value){
    var myMap = {test1: ["10","20","30","10"],test2: ["20","22","31","11"],test3: ["11","24","31","44"],test4: ["12","21","34","14"]}
    $(".result").each(function(i,e){
        $(this).html(eval("myMap."+value+"["+i+"]"));
    });
}

<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
    <option selected="selected" value="test1">fruits</option>    
    <option value="test2">veggies</option>
    <option value="test3">animals</option>
    <option value="test4">all</option>
</select>

<table>
    <tr>
        <th>Attributes</th>
        <th>values</th>
    </tr>
        <tr>
        <td>Strength</td>
        <td class="result"></td>
    </tr>
        <tr>
        <td>dexterity</td>
        <td class="result"></td>
    </tr>
        <tr>
        <td>intelligence</td>
        <td class="result"></td>
    </tr>
     <tr>
        <td>wisdom</td>
        <td class="result"></td>
    </tr>    
</table>

jquery:

function dropdownTip(value){
    var myMap = {test1: ["10","20","30","10"],test2: ["20","22","31","11"],test3: ["11","24","31","44"],test4: ["12","21","34","14"]}
    var elements = document.getElementsByClassName("result");
    var len = elements.length;
    for(var i=0;i<len;i++){
        elements[i].innerHTML = eval("myMap."+value+"["+i+"]");
    }

function dropdownTip(value){
    var myMap = {test1: ["10","20","30","10"],test2: ["20","22","31","11"],test3: ["11","24","31","44"],test4: ["12","21","34","14"]}
    $(".result").each(function(i,e){
        $(this).html(eval("myMap."+value+"["+i+"]"));
    });
}

<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
    <option selected="selected" value="test1">fruits</option>    
    <option value="test2">veggies</option>
    <option value="test3">animals</option>
    <option value="test4">all</option>
</select>

<table>
    <tr>
        <th>Attributes</th>
        <th>values</th>
    </tr>
        <tr>
        <td>Strength</td>
        <td class="result"></td>
    </tr>
        <tr>
        <td>dexterity</td>
        <td class="result"></td>
    </tr>
        <tr>
        <td>intelligence</td>
        <td class="result"></td>
    </tr>
     <tr>
        <td>wisdom</td>
        <td class="result"></td>
    </tr>    
</table>

---

注意：

GetElementsByCassName

在ie的较低版本中不受支持。在这种情况下，jquery将是更好的选择。

您可以使用jquery吗<代码>$（'A，'B，'C，'D'）.html（''+value+''）我决定使用您提供的常规Javascript解决方案，该解决方案运行良好。我唯一的问题是它显示了4个相同的结果。有可能改变吗？因此，我希望它显示test1、test2、test3和test4，而不是：fruit\u search、fruit\u search、fruit\u search、fruit\u search、fruit\u search、fruit\u search。顺便说一下，非常感谢！您可以通过使用

value+“something”

进行更改，这同样有效，很好！唯一的问题是它显示为test1test2，我需要使它在不同的列中位于彼此的顶部。你有这么多不同的选择真是太疯狂了。这几乎就是我需要的，看看这张图片：希望你能理解我的意思。我很遗憾地无法投票，但我接受了答案。非常感谢你所做的一切！我真的很感谢你的帮助，我为没有说得足够具体而道歉。祝您今天愉快，先生，保重！