Question

我正在尝试将链式下拉列表与最后一个选择显示/隐藏div的能力结合起来。我已经研究并找到了单独进行这两种方法的方法，但是当谈到组合javascript（我无疑更像是设计师）时，我正在闯入墙壁。我很感激有人花时间帮我解决这个问题。

这就是我喜欢它的工作原理：用户从DropDown List中选择1. DropDown List 2选项根据1中的选择显示。用户从DropDown List 2中选择，并显示相应的div。

这是我用来显示/隐藏div的Javascript：

function showDiv(divID)
{
    var div = document.getElementById(divID);
    div.style.display = ""; //display div
}

function hideDiv(divID)
{
    var div = document.getElementById(divID);
    div.style.display = "none"; // hide
}

function hideAllDivs()
{
    //Loop through the seclect menu values and hide all
    var courseSelect = document.getElementById("courseSelect");
    for (var i=0; i<=courseSelect.options.length -1; i++)
    {
        hideDiv(courseSelect.options[i].value);
    }
}

function toggle(showID){
    hideAllDivs(); // Hide all
    showDiv(showID); // Show the one we asked for
}

以下是链式下拉列表的Javascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" defer>
function cascadeSelect(parent, child){
    var childOptions = child.find('option:not(.static)');
    child.data('options',childOptions);

    parent.change(function(){
        childOptions.remove();
        child
        .append(child.data('options').filter('.sub_' + this.value))
        .change();
    })

    childOptions.not('.static, .sub_' + parent.val()).remove();

}

$(function(){
    cascadeForm = $('.cascadeTest');
    deptartmentSelect = cascadeForm.find('.deptartmentSelect');
    courseSelect = cascadeForm.find('.courseSelect');

    cascadeSelect(deptartmentSelect, courseSelect);
});

最后，我的HTML（简化）

<form action="#" class="cascadeTest">
<table>
<tr>
<th>Organization:</th>
    <td><select name="deptartmentSelect" class="deptartmentSelect">
        <option value="0">Select a Department</option>
        <option value="1">Dept A</option>
        <option value="2">Dept B</option>
        <option value="3">Dept C</option>
      </select></td>
  </tr>
  <tr>
    <th>Territory:</th>
    <td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)">
        <option value="0" class="static">- Courses -</option>
        <option value="A1" class="sub_1">Course A1</option>
        <option value="B1" class="sub_2">Course B1</option>
        <option value="C1" class="sub_3">Course C1</option>
      </select></td>
  </tr>
</table>
</form>
<div id="A1" style="display:none;">I am Course A1</div>
<div id="B1" style="display:none;">I am Course B1</div>
<div id="C1" style="display:none;">I am Course C1</div>

提前再次感谢！

Answer 1

看起来你在这里有一些jQuery与原始javascript混合在一起。仅供参考，您编写的一些函数不是必需的，因为它们已经包含在jQuery中。

首先，摆脱你的showDiv和hideDiv功能。这些都可以通过一行jQuery完成：

$('#divId').show();
$('#divId').hide();

对于你的hideAllDivs和toggle函数，这些也可以重写。

function hideAllDivs() {
    // fyi, your select element does not have id="courseSelect".
    // I am using name to select it, but you could also use class
    // to use the id selector, your select has to have id="courseSelect"
    $('select[name="courseSelect"] option').each(function() {
        $('#' + $(this).val()).hide();
    });
}

function toggle(showId) {
    hideAllDivs();
    $('#' + showId).show();
}

要在用户从下拉列表2中选择时显示或隐藏div，您可以使用jQuery更改方法。无需在HTML元素上使用onchange =“javascript”属性：

$('select[name=courseSelect]').change(function() {
    toggle($(this).find('option:selected').val());
});

显示/隐藏Div的JavaScript链式下拉列表？

1 个答案: