1

我有一个下拉列表（）数组，每个都有对应的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 的内容。我该怎么做？

4

1 回答 1

0

请尝试以下操作：

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

我希望它有帮助。

于 2013-08-18T15:50:14.407 回答