как заполнить 2 выпадающих списка из базы данных в html5

#javascript #php #html #mysql

#javascript #php #HTML #mysql

Вопрос:

мне нужна помощь с моим кодом, кодом в локальной веб-системе для электронного магазина

  1. у меня есть таблица stoke в базе данных phpmyadmin
  2. -таблица stoke(id, name, price, stoketype)
  3. stoketype должен иметь такие данные (телефон, компьютер, аксессуары и т. Д.)
  4. у меня есть 2 выпадающих списка и 1 текстовое поле в html5
  5. первый — отобразить все типы stoke из таблицы stoke (работает отлично)
  6. 2-й — отобразить всю электронику (имя) из таблицы stoke, имеющей stoketype, который я выбираю в первом выпадающем списке
  7. текстовое поле используется для отображения цены электронного (имя), которое я выбираю для во 2-м выпадающем списке, моя цель — получить такой результат
  8. телефон — iphone 6s — 300 $
  9. телефон — iphone 7 — 400 $
  10. компьютер — hp notebook 15a — 600 $

проблема в том, что я не знаю, как заполнить 2-й выпадающий список и текстовое поле в зависимости от выбранного значения в первом выпадающем списке, потому что мне нужно, чтобы данные были подключены и организованы. любая помощь: (

первый выпадающий список

 <select class="form-control" name="transt" size="1" id="input3" placeholder="stoke type">  

<?php 
                                        
$q = "select distinct stoketype from stoke";

$r = @mysqli_query($db, $q);                     

$num = mysqli_num_rows($r);

if($num > 0) {                                                   

while($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
$stkn= $row['stoketype'] ;

echo"<option value='".$stkn."' >".$stkn."</option>";
}

mysqli_free_result ($r);                           
} ?>
</select>
 

2-й выпадающий список

 <select class="form-control" id="select1" name="stokn" size="1" value="stok">  
<?php   
$q = "select  * from stoke where stoketype=??? ";

$r = @mysqli_query($db, $q);                     

$num = mysqli_num_rows($r);

if($num > 0) {                                                   



while($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
    

$stkname= $row['name'] ;
$price=$row['price'] ;

echo"<option value='".$stkname."'>".$stkname.'"</option>";
}}  
?>
</select>
 

код текстового поля

 <input type="text" name="stprice" value=<?php  ?> class="form-control" id="input9" placeholder="price"  >
 

ну, теперь он работает с этим кодом без обновления страницы
, мне пришлось создать 3 массива, чтобы использовать все мои данные в качестве новой базы данных

 <script> 
    
    var arr = [];
    var arr2 = [];
    var arr3 = [];
</script>
<?php 

$q = "select  * from stoke ";

$r = @mysqli_query($db, $q);                     

$num = mysqli_num_rows($r);

if($num > 0) {                                                   



while($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
    
    
    
    ?>  
    
    <script> arr.push("<?php echo$row['name'];?>");</script>
    <script> arr2.push("<?php echo$row['stoketype'];?>");</script>
    <script> arr3.push("<?php echo$row['price'];?>");</script>
<?php
 

затем создайте функцию, которая считывает данные массивов и обрабатывает нужные мне данные
в новой опции (узле)
, конечно, мне нужно каждый раз очищать опцию, потому что она будет просто дублироваться

 function f3(){
    
    var x1 = document.getElementById("input3").value;
    
    var i;
    
    
var select = document.getElementById("select1");
var length = select.options.length;
for (i = length-1; i >= 0; i--) {
  select.options[i] = null;
}
    

    
    for(i=0; i < arr.length; i  )
    {
    if(x1==arr2[i]){
        
var sel = document.getElementById('select1');

var opt = document.createElement('option');



// create text node to add to option element (opt)
opt.appendChild( document.createTextNode(arr[i]) );

// set value property of opt
opt.value = arr[i]; 

// add opt to end of select box (sel)
sel.appendChild(opt); 
        
    }}}
 

Ответ №1:

Сначала вам нужно ввести значение, которое вы выбрали в выпадающем списке, вы не можете заполнить второй выпадающий список и текстовое поле, просто выбрав значение из первого выпадающего списка.

Вот первый выпадающий список, я оставлю ваш код таким, какой он есть, но добавлю часть своего кода.

     <?php 
                                    
     $q = "select distinct stoketype from stoke";

     $r = @mysqli_query($db, $q);                     

      $num = mysqli_num_rows($r);

      if($num > 0) {                                                   

      while($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
       $stkn= $row['stoketype'] ;

       `echo"<option value='".$stkn."' >".$stkn."</option>";
       }

       mysqli_free_result ($r);                           
       } ?>
      </select>

    <input type="submit" value="Select value from first combobox" name="submit">

  <?php
    //second comboxbox depending on value of first comboxbox
   if(isset($_POST["submit"]) amp;amp; isset($_POST["transt"])){
   $transt=$_POST["transt"]
   $q = "select  * from stoke where stoketype='$trasnt' ";

     $r = @mysqli_query($db, $q);                     

      $num = mysqli_num_rows($r);
      echo "<select>"
      if($num > 0) {                                                   



      while($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {


      $stkname= $row['name'] ;
       $price=$row['price'] ;

      echo"<option value='".$stkname."'>".$stkname.'"</option>";
      }}  
      echo "</select>";
      }
      ?>
 

Что мы здесь сделали, так это то, что мы показали значения во втором comboxbox после того, как мы отправили значение в первом combobox.
Не забудьте создать форму.

        <form method="POST" action="<?php echo $_SERVER['PHP_SELF'];"?>
 

Надеюсь, это помогло.

Комментарии:

1. большое вам спасибо за эту помощь, я все равно знаю это решение, проблема в том, что я не хочу обновлять страницу, которую я имею, думая, что другой способ не запрашивает обновление страницы, я еще не пробовал, но что, если я заполню 2 массива в javascript именем и значением stoke, и оба массива имеют шовid затем я попытаюсь добавить данные из массивов в зависимости от идентификатора и значения, которое я хочу, что вы думаете??

2. Я никогда раньше не пробовал что-то подобное. Но я думаю, вам следует выполнить XMLHttpRequest к php-файлу и получить ответ.

3. я сделал это, и все работает просто отлично, я просто создаю массивы в javascript и заполняю их своими данными, например, создаю новую базу данных, но с сумасшедшими массивами Java script, затем я создаю функцию в Java script, которая считывает каждое значение массива и сравнивает его с первым полем со списком, если значения совпадают, тогда я создаю функцию в Java script, которая считывает каждое значение массива и сравнивает его с первым полем со списком.просто добавьте новую опцию (узел) во 2-й выпадающий список, LOL