Forum PHP.pl > [AJAX] Pojawiający się input

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX] Pojawiający się input

Emku

18.01.2013, 09:51:56

Witam serdecznie,

Problem jest banalny, ale potrzebuję najlepsze rozwiązania, im szybciej tym lepiej.
Posiadam w html select z listą modeli motocykli. Na końcu jest pozycja "Inne", po wybraniu której powinien się pojawić input do którego można wpisać jaki konkretnie model.

Korzystamy oczywiście z jQuery.

sajegib

18.01.2013, 10:06:49

Polecam koledze skorzystać z .change() i .show() w jquery, gdzie po zmianie .(change) na konkretna wartosc pokazujesz .show() konkretny input

Emku

18.01.2013, 10:09:57

Ja bym chyba na select dodał onchange funkcyjkę z show jedynie.
Ale jak zidentyfikować, że wybrana została pozycja "Inne" ?

b4rt3kk

18.01.2013, 10:16:02

Załóżmy, że tak wygląda nasz select:

[HTML] pobierz, plaintext 
<select class="check">
<option value="costam">Costam</option>
<option value="inne">Inne</option>
</select>
[HTML] pobierz, plaintext

Kod JS:

[HTML] pobierz, plaintext 
$(function() {
$('.check').change(function(){
  if ($(this).val() == 'inne') {
    $('body').append('<input type="text" />');
  }
});
});
[HTML] pobierz, plaintext

Emku

18.01.2013, 10:33:53

Już coraz bliżej.
Tylko takie rozwiązanie ma dwa minusy:
- input będzie sie pojawiał za każdym razem jak wybiorę jakiś model i z powrotem na "inne", wtedy po jakimś czasie mam sto inputów obok

- wybieram "inne" - pojawia mi się input, wybieram z powrotem jakiś model - input nie znika.

sajegib

18.01.2013, 10:38:38

Nadaj twojemu inputowi jakieś ID albo klasę i show/hide

[HTML] pobierz, plaintext 
$(function() {
$('.check').change(function(){
  if ($(this).val() == 'inne') {
    $('#input').show();
  }
  else{
     $('#input').hide();
  }
});
});
[HTML] pobierz, plaintext

Emku

18.01.2013, 10:53:38

Noi bajobongo.

[HTML] pobierz, plaintext 
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>bajeera</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
 
<script>
$(function() {
   	$('.check').change(function(){
 
	if ($(this).val() == 'inne') {
		$('#inny_model').show();
	} else {
		$('#inny_model').hide();
	}
	});
});
</script>
</head>
<body>
    <select class="check">
    <option value="costam">Costam</option>
    <option value="inne">Inne</option>
    </select>
	<input style="display:none;" type="text" id="inny_model" />
</body>
</html>
[HTML] pobierz, plaintext

Działa jak należy.

sajegib

18.01.2013, 11:02:12

Gratulacje :-)

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.