Ustawianie wartości wszystkich pól "select"

pytanie zadane 30 grudnia 2016 w JavaScript przez Rico305 Nowicjusz (170 p.)

Witam, nie programowałem do tej pory nic w JS ani z wykorzystaniem JQuery, stąd to pytanie.

Mam na swojej stronie kilka pól typu select, do każdego użytkownika jedno. Czy istnieje sposób, aby ustawić dla wszystkich użytkowników na raz tą samą wartość pola select?

(obrazek, gdyby ktoś nie zrozumiał o co mi chodzi)

3 odpowiedzi

odpowiedź 30 grudnia 2016 przez Vento Pasjonat (17,120 p.)
wybrane 30 grudnia 2016 przez Rico305

Najlepsza

http://codepen.io/thevento/pen/BQXErL

Polecam przeczytać, aby dobrze zrozumieć kod :)

https://developer.mozilla.org/en-US/docs/Web/Events

https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener

https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector

https://developer.mozilla.org/pl/docs/Web/API/Document/querySelectorAll

komentarz 30 grudnia 2016 przez Rico305 Nowicjusz (170 p.)

Pogubiłem się w sposobie dołączenia kodu js do strony, nie do końca wiem jak to zrobić

komentarz 30 grudnia 2016 przez Vento Pasjonat (17,120 p.)

Napisz, której linijki nie rozumiesz, to postaram się wytłumaczyć :)

komentarz 30 grudnia 2016 przez Rico305 Nowicjusz (170 p.)

Ogólnie w jaki sposób podłączyć kod js do strony

komentarz 30 grudnia 2016 przez Vento Pasjonat (17,120 p.)

Tworzysz nowy plik z rozszerzeniem js i dodajesz go do dokumentu za pomocą:

<script src="ścieżka dostępu"></script>

Kod też możesz umieścić pomiędzy znaczkami

<script>
   //kod javascript
</script>

w dokumencie HTML

komentarz 30 grudnia 2016 przez Rico305 Nowicjusz (170 p.)

W pliku index.html mam stworzoną stronę (w zasadzie skopiowaną)

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
	  <script src="ddl.js"></script>
	</head>
<body>
	<select id="main">
	  <option value="1">Pozycja 1</option>
	  <option value="2">Pozycja 2</option>
	  <option value="3">Pozycja 3</option>
	</select>

	<select class="option">
	  <option value="1">Pozycja 1</option>
	  <option value="2">Pozycja 2</option>
	  <option value="3">Pozycja 3</option>
	</select>
	
	<select class="option">
	  <option value="1">Pozycja 1</option>
	  <option value="2">Pozycja 2</option>
	  <option value="3">Pozycja 3</option>
	</select>
	
	<select class="option">
	  <option value="1">Pozycja 1</option>
	  <option value="2">Pozycja 2</option>
	  <option value="3">Pozycja 3</option>
	</select>
	
	<select class="option">
	  <option value="1">Pozycja 1</option>
	  <option value="2">Pozycja 2</option>
	  <option value="3">Pozycja 3</option>
	</select>
</body>		
</html>

A do pliku ddl.js skopiowałem kod:

	document.querySelector('#main').addEventListener('input', function(){
		var value = this.value;
		var element = document.querySelectorAll('.option');
		for(var x=0;x<element.length;x++)
			{
				element[x].value = value;
			}
		}, false);

Coś jednak na stronie nie działa :/

komentarz 30 grudnia 2016 przez Vento Pasjonat (17,120 p.)

Podepnij ten plik na końcu przed znacznikiem </body>

komentarz 30 grudnia 2016 przez Rico305 Nowicjusz (170 p.)

Wielkie dzięki, działa

odpowiedź 30 grudnia 2016 przez Roger Użytkownik (680 p.)

Zakładając, że we wszystkich dropdownach będą się znajdować te same wartości, można to zrobić poprzez ustawienie selectedIndex.

Przygotowałem dla Ciebie rozwiązanie bez użycia JQuery: https://jsfiddle.net/ge6foodf/9/

komentarz 30 grudnia 2016 przez Rico305 Nowicjusz (170 p.)

Wielkie dzięki! Udało mi się to zrobić kombinując przez php, ale to rozwiązanie jest duuużo bardziej praktycznie i wygodniejsze. Jeszcze raz wielkie dzięki!

komentarz 30 grudnia 2016 przez Vento Pasjonat (17,120 p.)

Wszystko spoko, ale eventów javascriptowych nie używa się w środku HTML'a jest to poważny błąd mieszania warstw aplikacji :) Polecam za to:

https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener

komentarz 30 grudnia 2016 przez Roger Użytkownik (680 p.)

Tak, masz jak najbardziej rację, chciałem tylko dla osoby, która nie ma zbyt dużego doświadczenia z JavaScriptem przygotować jak najprostszy przykład.

Do potwierdzenia tego co napisał Vento: http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice