Witam.
Mam problem z ustawieniem wartosci z listy rozwijanej. Chodzi mi o to, ze mam liste rozwijana <select>, ktora zawiera 20 pozycji <option> + pierwsza pozycja pusta <option></option>. Oczywiscie po zaladowaniu strony widac wlasnie to puste pole, reszte pozycji widoczne jest po rozwinieciu listy. Lista generowana jest dynamicznie przez php i mysql. Poza tym na tej samej stronie posiadam 20 punktow-linkow (poza formularzem) odpowiadających tej liscie, a wiec kazdy punkt-link ma odpowiednik w liscie rozwijanej. Chcialbym uzyskac taki efekt, ze po kliknięciu na punk-link, w liscie rozwijanej zaladowala by sie (byla widoczna) pozycja mu odpowiadająca. Mam nadzieje ze teraz dobrze to wyjasnilem. Prosze o pomoc.
0
1
Czyli krótko mówiąc chcesz, żeby po kliknięciu na dowolnym linku została wywołana akcja, która spowoduje, że zostanie zaznaczona opacja odpowiadająca klikniętemu przez Ciebie linkowi. Nic prostszego. Potrzebne Ci będzie:
- querySelectorAll dzięki któremu znajdziesz potrzebne elementy
- event click
- jakis handler, czyli funkcja ktora zmieni opcję na wlaściwą
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="link" data-option="1">Opcja 1</div>
<div class="link" data-option="2">Opcja 2</div>
<div class="link" data-option="3">Opcja 3</div>
<select id="select">
<option value="0">Wybierz</option>
<option value="1">Opcja 1</option>
<option value="2">Opcja 2</option>
<option value="3">Opcja 3</option>
</select>
<script>
// coś jak $(document).ready(fn); IE9+
document.onreadystatechange = function() {
var links = document.querySelectorAll('.link'),
select = document.getElementById('select');
function handler() {
var option = this.getAttribute('data-option'); // pobieramy opcję z kilkniętego elementu
select.value = option; // ustawiamy opcję naszego selekta
}
// querySelectorAll zwraca node list ktory niestety nie ma domyslnie funkcji forEach, więc ją pożyczamy
Array.prototype.forEach.call(links, function(elem) {
elem.addEventListener('click', handler.bind(elem)); // bindujemy do kazdego linku nasz handler
});
}
</script>
</body>
</html>
Trochę się tu pojawiło zaawansowanych rzeczy, do poczytania:
- Jak działa this w javascript
- Pożyczanie funkcji korzystając z metod call i apply
- Eventy jakie możemy używać typu click, change, keypress itd.
0
onreadystatechange
jest raczej zbędne, gdy kod wrzucamy tuż przed </body>
, natomiast przydałoby się iife.
Tak bym to napisał:
(function() {
var links = document.getElementsByClassName('link'),
select = document.getElementById('select');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function() {
select.value = this.getAttribute('data-option');
});
}
})();
0
Dziekuje za pomoc! Pozdrawiam
0
Jeszcze jedno pytanie.. Dlaczego ponizszy zapis nie dziala?
document.getElementById('ListaLokali').text[ListaValue].selected = true;