#javascript #forms #hidden #visible #drop-down-menu
#javascript #формы #скрытый #видимый #выпадающее меню
Вопрос:
Следующее отлично сработало для моих нужд. Взял состояние флажка и сделал замечательные вещи для меня; Сделал видимыми 3 разных элемента формы (по сравнению с показом / скрытием) на основе флажка, установленного или не установленного. Я думаю, просто. Опять же, я основываю «простой» на том, насколько симметрично выглядит код, и если он меньше 10 строк. В остальном я заблудился. Тем не менее, я официально отказался от возни с проблемой границы флажка IE и выравниванием X-браузера yippeedoodles. Я хочу, чтобы пиксель был идеальным сложным способом. Но я проиграл эту битву. Но вместо того, чтобы вдаваться в какие-либо обсуждения по этому поводу, мне нужно выполнить то же самое, используя поле выбора формы, что я смог сделать с помощью флажков (ниже):
<form id="form">
<input id="checkbox" name="checkbox" type="checkbox" onclick="showhideid" />
</form>
#IdOne, #IdTwo, #IdThree (visibility:hidden;}
function showhideid()
{
if (document.form.checkbox.checked)
{
document.getElementById("IdOne").style.visibility = "visible";
document.getElementById("IdTwo").style.visibility = "visible";
document.getElementById("IdThree").style.visibility = "visible";
document.getElementById("IdFour").setAttribute("class", "required");
}
else
{
document.getElementById("IdOne").style.visibility = "hidden";
document.getElementById("IdTwo").style.visibility = "hidden";
document.getElementById("IdThree").style.visibility = "hidden";
document.getElementById("IdFour").setAttribute("class", "");
}
}
Теперь, если я смогу выполнить то же самое, используя поле выбора (ниже), я умру счастливым человеком.
Это все, что я понял. У меня очень кружится голова от чтения справочных страниц Jquery / CSS, и я просто не могу собрать все это воедино.
<html>
<form id="form">
<select name="SelectBox">
<option>Make a Choice</option>
<option value="Value1">Selection1</option>
<option value="Value2">Selection2</option>
<option value="Value3">Selection3</option>
</select>
<label id="IdOne" for="input1">MeAndMyInputAreInvisibleByDesign</label>
<input id="IdTwo" name="input1" type="text">
<span id="IdThree">Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="I have none, but I will soon. I hope" />
</form>
</html>
Ответ №1:
взгляните на select тег:
<select name="SelectBox">
<option>Make a Choice</option>
<option value="IdTwo">Selection1</option> <!-- the value should be the id of the input field -->
<option value="IdThree">Selection2</option>
<option value="IdFour">Selection3</option>
</select>
Теперь вы должны присвоить класс селектора каждому элементу, который вы хотите показать / скрыть:
<input id="IdTwo" name="input1" type="text" class="toggle">
<span id="IdThree" class="toggle">
Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="toggle" />
Теперь посмотрим на javascript:
jQuery(document).ready(function(){
jQuery('input[name="SelectBox"]').change(function(){
jQuery('.toggle').css({"visibility":"hidden"});//Hide all
jQuery("#" jQuery(this).val()).css({"visibility":"visible"});
});
});
Комментарии:
1. Да, первый, приведенный ниже, сработал после того, как я вставил ссылку Jquery в HTML. Этот делал что-то другое? Я заметил несколько изменений синтаксиса и пару дополнений. .toggle просто сообщает x, чтобы он просто менял состояния, как следует из этого слова? Эта простая вещь, которую я опубликовал выше, кажется днем и ночью. Было прямолинейно. Я не знаком ни с какими зарезервированными словами, соглашениями и т.д. JS для меня в буквальном смысле совершенно новый. Но мне нравится то, что он, казалось бы, может делать. Проблема в том, что я не знаю, с чего начать, для чего мне это нужно. 🙂
2. @adg Да, класс toggle предназначен только для использования в качестве селектора. Это может быть что угодно вроде «xyz». Я просто попытался сделать код более понятным. Ничего не изменилось как таковое.
Ответ №2:
Вы можете сделать что-то вроде этого:
<html>
<form id="form">
<input type="text" id="IdOne" class="toggle" />
<input type="text" id="IdTwo" class="toggle" />
<input type="text" id="IdThree" class="toggle" />
<select name="SelectBox" id="selectBox">
<option value="0">Make a Choice</option>
<option value="IdOne">First element</option>
<option value="IdTwo">Second element</option>
<option value="IdThree">Third element</option>
</select>
</html>
это в javascript:
jQuery(document).ready(function(){
jQuery("#selectBox").change(function(){
jQuery(".toggle").hide();
jQuery("#" jQuery(this).val()).show();
});
});
Комментарии:
1. На самом деле, я не уверен, что это делает. В любом случае, прочитав свой собственный «заголовок», я понял, что вставил туда «Jquery». Jquery не является necc. Я уверен, что подойдет любой Jscript. Я читал кое-что, что, на мой взгляд, я назвал JaveScript = Jquery. Как салфетки для салфеток. Мои извинения.
2. Скрыть / показать приведет к разрыву формы, поэтому мне нужен метод Visible / Hidden. Я просто не знаком с тем, как применить это к полям выбора формы HTML.
3. Хорошо, в этом случае вы можете заменить
show()наcss({"visibility":"visible"})иhide()наcss({"visibility":"hidden"})4. Ошибка у меня. Смотрю на это. Исчерпан.
5. Теперь спрашиваю, был ли подключен плагин. 🙂 Я не загружал Jquery. В любом случае, большое спасибо за это. Мне придется поиграть с этим и посмотреть, смогу ли я придумать способ изменить тип класса И видимость одновременно. Кроме того, есть ли способ сделать это без необходимости загружать Jquery. Приведенный выше Javascript не полагался на это. Кажется немного излишним. Но я понятия не имею, потому что я работаю с Javascript уже второй час. Никогда к нему не прикасался.