Question

我有一系列下拉菜单（），每个都有相应的div。两者都是用PHP动态创建的。我想要做的是根据所选下拉列表的值更改下拉列表中相应div的内容。

我尝试了这段代码，它适用于一对dropdown和div。

HTML

<select id="selectField" style="padding-left: 20px;width:150px">
        <option value="option1">Cat</option>
        <option value="option2">Dog</option> 
<option value="option3">Lion</option> 
    </select>
 <div id="option1" class="block">Felis catus</div>
 <div id="option2" class="block">Canis lupus familiaris</div>
 <div id="option3" class="block">Panthera leo</div>

使用Javascript / jQuery的

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {
    $('.block').hide();
    $('#option1').show();
    $('#selectField').change(function () {
        $('.block').hide();
        $('#'+$(this).val()).fadeIn();
    });
});

});//]]>  

</script>

但它不适用于这样的HTML，有2组select和div元素。

<select id="selectField[]" style="padding-left: 20px;width:150px">
        <option value="option1">Cat</option>
        <option value="option2">Dog</option> 
<option value="option3">Lion</option> 
    </select>
 <div id="option1" class="block">Felis catus</div>
 <div id="option2" class="block">Canis lupus familiaris</div>
 <div id="option3" class="block">Panthera leo</div>

<select id="selectField[]" style="padding-left: 20px;width:150px">
        <option value="option1">Cat</option>
        <option value="option2">Dog</option> 
<option value="option3">Lion</option> 
    </select>
 <div id="option1" class="block">Felis catus</div>
 <div id="option2" class="block">Canis lupus familiaris</div>
 <div id="option3" class="block">Panthera leo</div>

有关如何使这项工作的任何建议？我不知道如何在jQuery中操作元素数组。任何帮助表示赞赏：）

编辑：我必须清楚这一点。 n 下拉数量和 n 相应div的数量。 n 由用户决定。我创建了一个下拉列表，以便我可以使用PHP轻松获取所选值。因此，唯一地命名每个下拉列表使我无法使用PHP获取所有选定的值。

如果* i * th下拉列表的值发生变化，我还想更改* i * th div的内容对应的改变了下拉菜单。我该怎么做？

Answer 1

请尝试关注：

<select id="selectField1" style="padding-left: 20px;width:150px">
        <option value="option1">Cat</option>
        <option value="option2">Dog</option> 
<option value="option3">Lion</option> 
    </select>     
<select id="selectField2" style="padding-left: 20px;width:150px">
        <option value="option1">Cat</option>
        <option value="option2">Dog</option> 
<option value="option3">Lion</option> 
    </select>
 <div id="option1" class="block">Felis catus</div>
 <div id="option2" class="block">Canis lupus familiaris</div>
 <div id="option3" class="block">Panthera leo</div>

$('.block').hide();
$('#selectField1,#selectField2').change(function () {
    $('.block').hide();
    $('#'+$(this).val()).fadeIn();
});

在这里工作小提琴：http://jsfiddle.net/zApq4/10/

我希望它有所帮助。

根据下拉列表中的选择更改相应的div内容

1 个答案: