Показать / скрыть раскрывающийся список на основе выбора другого раскрывающегося списка - PullRequest
Новая
       18

Показать / скрыть раскрывающийся список на основе выбора другого раскрывающегося списка

2 голосов
/ 09 августа 2011

Да, я пытался найти ответ на эту проблему и нашел много похожих вопросов, но ни один из них, похоже, не помог мне.

У меня есть выпадающий список с несколькими опциями, и когда пользователь выбирает одну опцию, появляется другой выпадающий список с правильными вариантами.Да, это была простая часть, но мне нужно отправить выбранные опции на сервер, и это сложная часть для меня.Я создал два разных выпадающих списка, которые появляются после того, как пользователь выбрал один вариант из «основного» выпадающего списка.Проблема в том, что правильные значения отправляются на сервер только из первого всплывающего списка.Если я выберу значение из всплывающего 2-го списка, первая опция из 1-го списка будет отправлена ​​на сервер.

Вот мой код: 

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.hiddenMenu {display: none;}
.visibleMenu {display: inline;}
</style>
<script type="text/javascript">
var lastDiv = "";
function showDiv(divName) {
    // hide last div
    if (lastDiv) {
        document.getElementById(lastDiv).className = "hiddenMenu";
    }
    //if value of the box is not nothing and an object with that name exists, then change the class
    if (divName && document.getElementById(divName)) {
        document.getElementById(divName).className = "visibleMenu";
        lastDiv = divName;
    }
}
</script>
</head>
<body>
<form action="http://url.here" method="post" enctype="multipart/form-data">
    <label for="shirttype">T-shirt </label>
    <select name="category" id="shirttype" onchange="showDiv(this.value);">
        <option value="">Choose type&hellip;</option>
        <option value="female">Female</option>
        <option value="male">Male</option>
    </select>
    <br/>
    <p id="female" class="hiddenMenu">
    <label for="shirtsizefemale">Size </label>
    <select name="subjectCategory" id="shirtsizefemale">
        <option value="femaleXS">XS</option>
        <option value="femaleS">S</option>
    </select>
    </p>
    <p id="male" class="hiddenMenu">
    <label for="shirtsizemale">Size </label>
    <select name="subjectCategory" id="shirtsizemale">
        <option value="maleXS">XS</option>
          <option value="maleS">S</option>
     </select>
     </p>
    <br/>
<input type="submit" value="Upload">
</form>
</body>
</html>

Итак, если я выберу мужской S длябудь моей рубашкой.Я получаю значение "femaleXS" на сервере.Но если я выберу женский S в качестве рубашки, значение будет правильно отправлено на сервер.Только значение из 1-го всплывающего списка отправляется на сервер правильно.

Хорошо, поэтому я решил создать только один всплывающий список, и в этом списке были бы все параметры.Я бы просто скрыл неправильные варианты в зависимости от того, какой тип рубашки выбрал пользователь.Проблема в том, что у меня закончились навыки JS :) Этот код JS, который я использую, я получил от здесь .

Помогите мне.Я думаю, что один выпадающий список со скрытыми значениями будет лучшим выбором, но я просто не знаю, как это сделать: P

1 Ответ

5 голосов
/ 09 августа 2011

Ваш код JavaScript может быть намного проще, но чтобы просто ответить на ваш вопрос, добавьте: 

document.getElementById('shirtsize' + lastDiv).disabled = true;

после: 

document.getElementById(lastDiv).className = "hiddenMenu";

И добавьте: 

document.getElementById('shirtsize' + divName).disabled = false;

после: 

document.getElementById(divName).className = "visibleMenu";

Затем добавьте отключено в оба скрытых тега выбора.

Как: 

<select name="subjectCategory" id="shirtsizemale" disabled>

отключено означает, что оно не отправляется на сервер.

...