Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][MySQL][PHP]pola select option
Forum PHP.pl > Forum > Przedszkole
cent4
22.07.2011, 20:44:38
Jest pole select option - wybiera się opcję i pod nim jest div - gdzie wybrana opcja jest wypisana...
2 pytania:
1. Jak zrobić wypisanie do pola tekstowego, a nie div?
2. Chcę zrobić 2 takie pola, z dwoma polami tekstowymi + jeszcze jedno pole tekstowe, do którego wypisze się dana opcja - która jest zależna od wybranych wcześniej 2.
Np.:
1 pole select - wybieram rodzaj książki
1 pole tekstowe - wypis wybranego rodzaju książki
2 pole select - wybieram typ książki
2 pole tekstowe - wypis wybranego typu książki
3 pole tekstowe - wypisuje kolejny numer id z bazy (gdzie książka ma taki sam jak wybrany rodzaj i taki sam jak wybrany typ)

Jak to zrobić?

Plik, który wypisuje dane z pola select jest pod adresem:
http://api.jquery.com/selected-selector/
oto kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   div { color:red; }
  6.   </style>
  7.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  8. </head>
  9. <body>
  10.   <select name="garden" multiple="multiple">
  11.  
  12.     <option>Flowers</option>
  13.     <option selected="selected">Shrubs</option>
  14.     <option>Trees</option>
  15.     <option selected="selected">Bushes</option>
  16.  
  17.     <option>Grass</option>
  18.     <option>Dirt</option>
  19.   </select>
  20.   <div></div>
  21. <script>
  22.  
  23.     $("select").change(function () {
  24.           var str = "";
  25.           $("select option:selected").each(function () {
  26.                 str += $(this).text() + " ";
  27.               });
  28.           $("div").text(str);
  29.         })
  30.         .trigger('change');
  31. </script>
  32.  
  33. </body>
  34. </html>
[HTML] pobierz, plaintext


Proszę bardzo o pomoc...
Spawnm
22.07.2011, 21:02:47
Daj zamiast <div> input typu text z jakimś id.
No i w js/jquery zmieniasz $("div").text(str); na $("#id").val(str)
cent4
23.07.2011, 07:26:53
OK.
A jak zrobić pkt. 2 - w sumie chodzi o to jak zrobić 3 pole, które po wybraniu dwóch select'ów do trzeciego pola tekstowego samo wpisze automatycznie daną zależną od wybranych dwóch opcji - tak jak to opisałem poniżej?:

2. Chcę zrobić 2 takie pola, z dwoma polami tekstowymi + jeszcze jedno pole tekstowe, do którego wypisze się dana opcja - która jest zależna od wybranych wcześniej 2.
Np.:
1 pole select - wybieram rodzaj książki
1 pole tekstowe - wypis wybranego rodzaju książki
2 pole select - wybieram typ książki
2 pole tekstowe - wypis wybranego typu książki
3 pole tekstowe - wypisuje kolejny numer id z bazy (gdzie książka ma taki sam jak wybrany rodzaj i taki sam jak wybrany typ)
Spawnm
23.07.2011, 09:09:32
Przy wyborze dowolnego selekta pobierasz wartości z obydwu i sprawdzasz czy oba są już wybrane. Jeśli tak, dajesz ajax aby pobrać z db dane do 3 pola. Zrobisz to np. przez $('#trzy').load('/trzy.php?rodzaj='+rodzaj+'&typ='+typ);
cent4
24.07.2011, 20:50:17
Wypis z selectów działa super - jak zrobić sprawdzenie czy wybrano i pobranie wybranych opcji i jak je przekazać do pliku php, następnie jak je pobrać już w pliku php?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   div { color:red; }
  6.   </style>
  7.   <script src="jquery-1.4.4.min.js"></script>
  8. </head>
  9. <body>
  10.   <select id="s1">
  11.     <option>11</option>
  12.     <option>12</option>
  13.     <option>13</option>
  14.     <option>14</option>
  15.     <option>15</option>
  16.     <option>16</option>
  17.   </select>
  18.  
  19.   <select id="s2">
  20.     <option>221</option>
  21.     <option>222</option>
  22.     <option>223</option>
  23.     <option>224</option>
  24.     <option>225</option>
  25.     <option>226</option>
  26.   </select>
  27.   <br>
  28.   <input type="text" id="jeden">
  29.   <br>
  30.   <input type="text" id="dwa">
  31.   <br>
  32.   <br>
  33.   <br>
  34.   <input type="text" id="trzy">
  35. <script>
  36.     $("#s1").change(function () {
  37.           var str = "";
  38.           $("#s1 option:selected").each(function () {
  39.                 str += $(this).text() + " ";
  40.               });
  41.           $("#jeden").val(str);
  42.         })
  43.         .trigger('change');
  44. </script>
  45.  
  46. <script>
  47.     $("#s2").change(function () {
  48.           var str = "";
  49.           $("#s2 option:selected").each(function () {
  50.                 str += $(this).text() + " ";
  51.               });
  52.           $("#dwa").val(str);
  53.         })
  54.         .trigger('change');
  55. </script>
  56.  
  57.  
  58.  
  59. <script>
  60.     //$('#trzy').load('plik.php?jeden='+jeden+'&dwa='+dwa); 
  61. </script>
  62.  
  63. </body>
  64. </html>
[HTML] pobierz, plaintext
Spawnm
24.07.2011, 21:03:22
Przecież ci napisałem post wyżej...
Cytat
następnie jak je pobrać już w pliku php

W moim przykładzie wysłałem geta więc użyj $_GET
cent4
25.07.2011, 08:50:49
Nie no - wszystko napisałeś bardzo czytelnie i jasno.
Ale mam problem z "prostymi" rzeczami - raczkuję w ajaxie :-)...
1. Jak po wyborze dowolnego selekta pobierać wartości z obydwu selectów?
2. Jak sprawdzić czy selecty zostały wybrane?
Spawnm
25.07.2011, 09:03:35
1. Bodajże s1 = $('#mySelect').val(); i tak samo dla drugiego.
2. sprawdzasz czy s1 != '' smile.gif
cent4
25.07.2011, 20:01:58
Coś nie chce do trzeciego pola tekstowego wpisywać np. wybranych opcji (z pliku php):
echo $_GET["jeden"];
echo $_GET["dwa"];

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   div { color:red; }
  6.   </style>
  7.   <script src="jquery-1.4.4.min.js"></script>
  8. </head>
  9. <body>
  10.   <select id="s1">
  11.     <option>11</option>
  12.     <option>12</option>
  13.     <option>13</option>
  14.     <option>14</option>
  15.     <option>15</option>
  16.     <option>16</option>
  17.   </select>
  18.  
  19.   <select id="s2">
  20.     <option>221</option>
  21.     <option>222</option>
  22.     <option>223</option>
  23.     <option>224</option>
  24.     <option>225</option>
  25.     <option>226</option>
  26.   </select>
  27.   <br>
  28.   <input type="text" id="jeden">
  29.   <br>
  30.   <input type="text" id="dwa">
  31.   <br>
  32.   <br>
  33.   <br>
  34.   <input type="text" id="trzy">
  35. <script>
  36.     $("#s1").change(function () {
  37.           var str = "";
  38.           $("#s1 option:selected").each(function () {
  39.                 str += $(this).text() + " ";
  40.               });
  41.           $("#jeden").val(str);
  42.           s1 = $('#s1').val();          
  43.         })
  44.         .trigger('change');
  45. </script>
  46.  
  47. <script>
  48.     $("#s2").change(function () {
  49.           var str = "";
  50.           $("#s2 option:selected").each(function () {
  51.                 str += $(this).text() + " ";
  52.               });
  53.           $("#dwa").val(str);     
  54.           s2 = $('#s2').val();    
  55.         })
  56.         .trigger('change');
  57. </script>
  58.  
  59.  
  60.  
  61. <script>
  62.     if (s1!=''){ 
  63.         if (s2!=''){
  64.             $('#trzy').load('plik.php?jeden='+s1+'&dwa='+s2);
  65.         }
  66.     } 
  67. </script>
  68.  
  69. </body>
  70. </html>
[HTML] pobierz, plaintext


plik.php:
[PHP] pobierz, plaintext 
  1. <?php 
  2. echo $_GET["jeden"];
  3. echo $_GET["dwa"]; 
  4. ?>
[PHP] pobierz, plaintext


Dlaczego mi dynamicznie nie wypisuje danych z zewnętrznego pliku, jeżeli wybieram opcje select option?

[HTML] pobierz, plaintext 
  1. <select id="s1">
  2.     <option>0</option>
  3.     <option>11</option>
  4.     <option>12</option>
  5.     <option>13</option>
  6.     <option>14</option>
  7.     <option>15</option>
  8.     <option>16</option>
  9.   </select>
  10.  
  11.   <select id="s2">
  12.     <option>0</option>
  13.     <option>221</option>
  14.     <option>222</option>
  15.     <option>223</option>
  16.     <option>224</option>
  17.     <option>225</option>
  18.     <option>226</option>
  19.   </select>
  20. ...
  21.   <input type="text" id="jeden">
  22.   <input type="text" id="dwa">
  23.   <input type="text" id="trzy">
  24. <script>
  25.     $("#s1").change(function () {
  26.           var str = "";
  27.           $("#s1 option:selected").each(function () {
  28.                 str += $(this).text() + " ";
  29.               });
  30.           $("#jeden").val(str);
  31.           s1 = $('#s1').val();          
  32.         })
  33.         .trigger('change');
  34. </script>
  35.  
  36. <script>
  37.     $("#s2").change(function () {
  38.           var str = "";
  39.           $("#s2 option:selected").each(function () {
  40.                 str += $(this).text() + " ";
  41.               });
  42.           $("#dwa").val(str);     
  43.           s2 = $('#s2').val(); 
  44.         })
  45.         .trigger('change');
  46.  
  47. </script>
  48.  
  49.  
  50.  
  51. <script>
  52.     if (s1!='0'){ 
  53.         if (s2!='0'){
  54.             $("#trzy").load("plik.php?jeden="+s1+"&dwa="+s2);
  55.         }
  56.     } 
  57. </script>
[HTML] pobierz, plaintext


plik: plik.php:
[PHP] pobierz, plaintext 
  1. <?php 
  2.  echo 12;
  3. ?>
[PHP] pobierz, plaintext
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.