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

Question

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

我尝试了这段代码，它适用于一对下拉列表和 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>

但它不适用于具有 2 组 select 和 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>

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

希望对你有帮助。