JS - Jak w formlarzu ustawić konkretą wartosc z listy rozwijanej

0

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.

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:

  1. querySelectorAll dzięki któremu znajdziesz potrzebne elementy
  2. event click
  3. 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:

  1. Jak działa this w javascript
  2. Pożyczanie funkcji korzystając z metod call i apply
  3. 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;

1 użytkowników online, w tym zalogowanych: 0, gości: 1