Question

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

<script type="text/javascript">
function dropdownTip(value){
    console.log(value);
        document.getElementById("result").innerHTML = value;
    }</script>

<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
    <option selected="selected" value="fruit_search">fruits</option>    
    <option value="veggies_search">veggies</option>
    <option value="animals_search">animals</option>
    <option value="all_search">all</option>
</select>

<div id="result"></div>

我已经稍微调整了一下以供我自己使用并设法将其放入表中。但问题是我想根据1个选择得到多个结果。

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

如果有人可以帮我解决这个问题，那就太好了。

提前致谢

Answer 1

如果你可以使用jquery，如果A，B，C和D都是div，比如'result'，试试这个：

HTML

<select id="dropdownTip" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="fruit_search">fruits</option>    
<option value="veggies_search">veggies</option>
<option value="animals_search">animals</option>
<option value="all_search">all</option>
</select>

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>

jquery的

$('#dropdownTip').change(function() {
  var value = this.value;
   console.log(value);
    $('#A, #B, #C, #D').html('' + value + '');
  });

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

Fiddle

Answer 2

我认为你应该使用jquery来做这件事，会简化一些事情，但是如果你想使用javascript你还可以用它来做它

HTML

<select id="selectMenu" style="margin-right:10px; margin-top:2px;">
    <option selected="selected" value="fruit_search">fruits</option>    
    <option value="veggies_search">veggies</option>
    <option value="animals_search">animals</option>
    <option value="all_search">all</option>
</select>

<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>

JQuery的

$( document ).ready(function() {
    $("#selectMenu").change(function(){
        $("#result1").append($(this).find(":selected").text());
        $("#result2").append($(this).find(":selected").text());
        $("#result3").append($(this).find(":selected").text());
    });
});

的jsfiddle

http://jsfiddle.net/agusgambina/b6ydm/106/

希望帮助

Answer 3

<强>小提琴：

<强> javscript：

<强> http://jsfiddle.net/cT9j5/7/

<强> jquery的：

<强> http://jsfiddle.net/cT9j5/8/

<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>

<强>的javascript：

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+"]");
    }

}

使用jquery会更容易：

<强> 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"]}
    $(".result").each(function(i,e){
        $(this).html(eval("myMap."+value+"["+i+"]"));
    });
}

注意： getElementsByClassName不支持较低版本的ie。在那种情况下，jquery会是更好的选择。

根据1个下拉选项填充多个内容

3 个答案: