#javascript #function
#javascript #функция
Вопрос:
когда пользователь отвечает на QuestionA (выпадающий список) и questionA1 (список флажков), мне нужна информация, которую они ввели, которая автоматически отображается в разделе questionB (выпадающий список) и questionB1 (список флажков)
Я пытаюсь использовать функцию javascript для этого.
пока у меня есть
var e = document.getElementById("questionA");
var AnswerA = e.options[e.selectedIndex].text;
Я знаю, что это присвоит выбор из QuestionA переменной answerA, но я не знаю, как присвоить это выпадающему списку questionB. Я также не знаю, как получить выборки из списка флажков (может быть несколько выборок) для заполнения второго списка флажков.
Буду признателен за любую помощь.
Комментарии:
1. Добро пожаловать в StackOverflow. Вы можете отформатировать свой код, чтобы он был немного более читабельным, сделав отступ в каждой строке на 4 пробела (я пошел дальше и внес правку за вас)
2. Пожалуйста, покажите html-предпочтительный до и после
Ответ №1:
Вам нужно было бы привязаться к методу onchange из выпадающего списка A. Таким образом, всякий раз, когда это изменяется (т. Е. Если что-то выбрано), вы можете получить значение этого выбора и поместить его в выпадающий список B, выполнив что-то вроде :
var option = document.createElement('option');
option.value = AnswerA;
option.innerHTML = AnswerA;
document.getElementById('questionB').appendChild(option);
Делегирование событий обычно немного сбивает с толку начинающих разработчиков javascript, потому что это нужно делать немного по-разному для каждого браузера. Я бы посоветовал погуглить cross browser event delegation или пока использовать какую-нибудь библиотеку JavaScript, которая поможет вам быстрее начать работу. Затем, когда ваш проект будет завершен, посмотрите, как работает делегирование событий в разных браузерах.
Комментарии:
1. Я могу включить его в раздел отправки функции, поэтому ему не обязательно быть функцией onchange. Используется только в том случае, если при сохранении записи для нее ничего не было выбрано. Приведенный выше раздел сохранен для QuestionA, но не передается в questionB. Я потратил последние два дня на написание функций JavaScript, поэтому простите меня, если я не придаю особого значения.
Ответ №2:
итак, это то, что я получил из вашего вопроса
вы хотите, чтобы ответы, заданные в первых вопросах, стали по умолчанию для вторых вопросов?
итак, это ваш пример, я сам не использую необработанный dom, поэтому этот момент не может быть полностью независимым от браузера
<html>
<head>
<script type="text/javascript" charset="utf-8">
var setup = function() {
var questionA = document.getElementById("question-a");
var checkboxesA = document.getElementById("checkboxes-a");
var questionB = document.getElementById("question-b");
var checkboxesB = document.getElementById("checkboxes-b");
questionA.onchange = function() {
questionB.selectedIndex = questionA.selectedIndex;
};
checkboxesA.onchange = function(e) {
var checkbox = e.srcElement;
var ele = document.getElementById(checkbox.getAttribute("data-question-id"));
ele.checked = checkbox.checked;
};
};
</script>
</head>
<body onload="setup()">
<div>
<div class="first-questions">
<h2> first question </h2>
<select id="question-a">
<option value="0">first</option>
<option value="0">second</option>
<option value="0">third</option>
</select>
<div id="checkboxes-a">
<input type="checkbox" data-question-id="something-first" value="first">first</input>
<input type="checkbox" data-question-id="something-second" value="second">second</input>
<input type="checkbox" data-question-id="something-third" value="third">third</input>
</div>
</div>
<div class="second-questions">
<h2> second question </h2>
<select id="question-b">
<option value="0">first</option>
<option value="0">second</option>
<option value="0">third</option>
</select>
<div id="checkboxes-b">
<input type="checkbox" name="question-b-first"
id="something-first" value="first">first</input>
<input type="checkbox" name="question-b-second"
id="something-second" value="second">second</input>
<input type="checkbox" name="question-b-third"
id="something-third" value="third">third</input>
</div>
</div>
</div>
</body>
</html>
идея в том, что флажки, о которых идет речь, a имеют идентификатор вопросов, о которых идет речь b
но вы также можете найти их из соглашения или добавить события вручную к каждому флажку: D
но если вы собираетесь делать что-то вроде dom, я бы рекомендовал использовать фреймворк javascript (jquery), также проще получить хорошую документацию …. в Интернете полно ужасных необработанных материалов javascript.
Редактировать —
хорошо, причина, по которой это не работает, вероятно, заключается в этой строке var checkbox = e.srcElement;
это может отличаться в разных браузерах, измените его на это
if(например,srcElement) { var checkbox = e.srcElement; } if(например,originalTarget) { var checkbox = e.originalTarget; }
и это работает для firefox, но я не знаю, что в ie этого нет, но это хорошая причина использовать такой фреймворк, какhttp://wwww.jquery.com для различных браузеров
простой способ
если вы хотите, чтобы оно изменяло значения при отправке, вам сначала нужно подписаться на это событие, а затем проверить, не получены ли ответы на вопросы в вопросах b, после чего код для изменения состояния элементов работает, как в примере
Комментарии:
1. боюсь, это не работает. также мне нужно добавить его в функцию отправки — если пользователь не ввел выделение для questionB, то оно автоматически заполняется выделением для QuestionA
Ответ №3:
var e = document.all("QuestionA").options.selectedIndex;
document.all("QuestionB").options.selectedIndex = e;
var ckBox1 = document.getElementById("checkboxA")
var ckBox2 = document.getElementById("checkboxB")
if (ckBox1.checked == true)
{
ckBox2.checked = true;
}
На всякий случай, если кто-нибудь еще ищет это. Это код, с которым я начал работать. Спасибо за вашу помощь.