Javascript - Скрипт простой формы, чтобы скрыть/показать поля

Я ищу простой скрипт в javascript, который я могу расширить, на базовом уровне. Я хочу показать 1 поле, основанное на какой опции из <select>, которую пользователь выбирает.Javascript - Скрипт простой формы, чтобы скрыть/показать поля

<select id="options"> 
    <option value="spoon">Spoon</option> 
    <option value="form">Fork</option> 
</select> 

if select=spoon { 
    <input>enter your favorite soup</input> 
} else { 
    <input>Your gonna need a knife</input> 
}

Простой JS - это ключ!

источник

2010-05-12 CLiown

Нечто вроде this? это называется прикована Выбирается

источник

2010-05-12 13:47:56 vsync

Вы можете сделать использование атрибута <select> элемента onchange выполнить некоторый Javascript код при каждом изменении в раскрывающемся списке.

<select onchange="myFunction(this)">

(вы видите, что я прошел выпадающий элемент сам в качестве аргумента метода, это просто сделано для удобства)

Вы можете использовать element.options, чтобы получить все возможные варианты и element.selectedIndex, чтобы получить индекс в настоящее время выбранный вариант.

function myFunction(dropdown) { 
    var selectedOption = dropdown.options[dropdown.selectedIndex].value; 
}

Вы можете использовать document.getElementById() для извлечения какой-либо элемент, id. Представьте себе, что у Вас есть следующие элементы ввода:

<input type="text" id="foo"> 
<input type="text" id="bar">

, то вы можете получить их следующим образом:

var foo = document.getElementById('foo'); 
var bar = document.getElementById('bar');

Вы можете использовать element.style.display, чтобы изменить CSS display свойство. Значение block означает show и значение none означает hide. Теперь сделайте математику:

function myFunction(dropdown) { 
    var selectedOption = dropdown.options[dropdown.selectedIndex].value; 
    var foo = document.getElementById('foo'); 
    var bar = document.getElementById('bar'); 

    if (selectedOption == 'spoon') { 
     foo.style.display = 'none'; // Hide foo. 
     bar.style.display = 'block'; // Show bar. 
    } else { 
     foo.style.display = 'block'; // Show foo. 
     bar.style.display = 'none'; // Hide bar. 
    } 
}

Чтобы узнать больше о Javascript и HTML DOM, я рекомендую this tutorial.

источник

2010-05-12 13:47:59 BalusC

Другой подход заключается в обработчик событий для изменений в выборе вбить значение имени класса на форме. Затем вы можете контролировать то, что видно в каждом состоянии с помощью CSS. Разумеется, конечно, если есть много вариантов, но это означает, что вы позволяете внутренним функциям браузера выполнять работу DOM. – Pointy

@Pointy: Мы также можем предложить ему jQuery. Просто запустите simple;) – BalusC

Я думаю, что я разместил это где-то в другом месте, но не смог найти этот пост сейчас. Это может быть чем-то для вас.
Посмотрите ma, no jQuery! (яй!)

<body> 

<select id="mySelect" onchange="npup.doSelect(this);"> 
    <option value="">Npup says 'select'</option> 
    <!-- the option values are suffixes for the elements to show --> 
    <option value="0">zero</option> 
    <option value="1">one</option> 
    <option value="2">two</option> 
</select> 
<!-- container for any elements that are to be in the game --> 
<div id="mySpecialElements"> 
    <!-- these have ids that end with an index for easy retrieval in "findeElement" function below--> 
    <div id="npup0" class="hidden">div 0</div> 
    <div id="npup1" class="hidden">div 1</div> 
    <div id="npup2" class="hidden">div 2</div> 
</div> 

<script type="text/javascript"> 

window.npup = (function (containerId, baseId) { 
    // save the container of your special element 
    var elementsContainer = document.getElementById(containerId); 
    var baseId = baseId; 
    function doSelect(select) { 
     // get value of select 
      var idx = select.selectedIndex; 
      if (idx<0) {return;} 
     var value = select.options[idx].value; 
     // find element based on the value of the select 
     var targetDiv = findElement(value); 
     if (!targetDiv) { return;} // didn't find the element, bail 
     // do magic.. 
     hideAll(elementsContainer); 
     showElement(targetDiv); 
    } 
    // retrieve some element based on the value submitted 
    function findElement(value) { 
     return document.getElementById(baseId+value); 
    } 
    // hide all element nodes within some parent element 
    function hideAll(parent) { 
     var children = parent.childNodes, child; 
     // loop all the parent's children 
     for (var idx=0, len = children.length; idx<len; ++idx) { 
      child = children.item(idx); 
      // if element node (not comment- or textnode) 
      if (child.nodeType===1) { 
       // hide it 
       child.style.display = 'none'; 
      } 
     } 
    } 
    // display a certain element 
    function showElement(element) { 
     element.style.display = ''; 
    } 
    // hide all on page load (might want some extra logic here) 
    hideAll(elementsContainer); 

    // export api to use from select element's onchange or so 
    return { 
     doSelect: doSelect 
    }; 
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements 


</script> 

</body>

источник

2010-05-12 13:49:52 npup

'var value = select.value;' не будет работать. – BalusC

Ops, спасибо - исправил его. Это пробилось, потому что это «сработало» (ff3.6.3, и многие другие браузеры тоже я думаю). – npup

Javascript - Скрипт простой формы, чтобы скрыть/показать поля

ответ

Смежные вопросы