Выпадающий список с цепочкой JavaScript, который показывает / скрывает раздел? - PullRequest
Новая
       24

Выпадающий список с цепочкой JavaScript, который показывает / скрывает раздел?

1 голос
/ 09 декабря 2011

Я пытаюсь объединить цепочку выпадающего списка с возможностью последнего выбора, чтобы показать / скрыть div.Я исследовал и нашел способы сделать оба по отдельности, но я ударил стену, когда дело доходит до объединения javascript (я, по общему признанию, больше дизайнер).Я был бы признателен всем, кто нашел время, чтобы помочь мне с этим.

Вот как я бы хотел, чтобы это работало: пользователь выбирает из списка DropDown 1. Список DropDown 2 появляются в зависимости от выбора в 1. Пользователь выбирает из DropDown List 2, и отображается соответствующий div.

Вот Javascript, который я использую, чтобы показать / скрыть div: 

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>

Еще раз спасибо заранее!

1 Ответ

0 голосов
/ 09 декабря 2011

Похоже, у вас есть jQuery, смешанный с необработанным javascript. К вашему сведению, некоторые из написанных вами функций не нужны, так как они уже включены в jQuery.

Прежде всего, избавьтесь от функций showDiv и hideDiv. Каждый из них может быть сделан одной строкой jQuery: 

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

Что касается ваших функций hideAllDivs и переключателей, их тоже можно переписать. 

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();
}

Чтобы показать или скрыть div, когда пользователь выбирает из выпадающего списка 2, вы можете использовать метод изменения jQuery. Нет необходимости иметь атрибут onchange = "javascript" в вашем HTML-элементе: 

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