Показать (видимый / скрытый НЕ показать / скрыть) HTML-элемент на основе выбора формы выбора - PullRequest
Новая
       14

Показать (видимый / скрытый НЕ показать / скрыть) HTML-элемент на основе выбора формы выбора

1 голос
/ 17 апреля 2011

Я действительно новичок во всем этом, поэтому со мной все в порядке:

Следующее отлично сработало для моих нужд.Взял состояние флажка и сделал для меня замечательные вещи;Сделано 3 различных элемента формы видимыми (против отображения / скрытия), основываясь на установленном или не установленном флажке.Все просто, наверное.Опять же, я основываю «простой» на том, как симметрично выглядит код, и если он меньше 10 строк.Кроме этого, я потерян.Тем не менее, я официально перестал возиться с проблемой границы флажка IE и yippeedoodles выравнивания X-браузера.Я хочу, чтобы пиксель совершенствовался на своем пути.Но я проиграл эту битву.Но вместо того, чтобы обсуждать это, мне нужно выполнить то же самое, используя поле выбора формы, как я мог сделать с помощью флажков (ниже): 

<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>

Ответы [ 2 ]

3 голосов
/ 17 апреля 2011

взгляните на тег 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 голос
/ 17 апреля 2011

Вы можете сделать что-то вроде этого: 

<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();
 });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...