Javascript-форум - select onchange

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - select onchange (https://javascript.ru/forum/events/54503-select-onchange.html)

Доброго времени суток. Помогите пожалуйста. Я не силен в javascript. но похоже без него в ситуации не разберусь.

Есть select форма :

Код:

<select name='category'>

          <option value="avto">AVTO</option>

          <option value="moto">MOTO</option>

</select>

Рядом, еще один select берущий данные из MySQL в случае выбора в первом selecte "AVTO" :

Код:

<?php 

     $res =  mysql_query("SELECT model FROM transport WHERE category='avto'",$my_db); 

         

     echo" 

     <select name='model' required> 

         <option value=''  disabled selected>MODEL</option>"; 

     while($row = mysql_fetch_assoc($res)){ 

         ?> 

         <option value="<?=$row['model']?>"><?=$row['model']?></option>

         <? 

} echo "</select>"; 

?>

В случае выбора "МОТО", должен быть select :

Код:

<?php 

     $res =  mysql_query("SELECT model FROM transport WHERE category='moto'",$my_db); 

         

     echo" 

     <select name='model' required> 

         <option value=''  disabled selected>MODEL</option>"; 

     while($row = mysql_fetch_assoc($res)){ 

         ?> 

         <option value="<?=$row['model']?>"><?=$row['model']?></option>

         <? 

} echo "</select>"; 

?>

Я так понимаю, что как-то можно сделать при помощи "select onchange"? Может я ошибаюсь и есть еще варианты?

нуда, onchange
А дальше три варианта:
1) Оба "вторых" селекта изначально скрыты, показываете нужный по onchange
2) По onchange аяксом подгружаете один из "вторых" селектов
3) (жуть) сабмит формы с селектом по onchange и на пыхе показывать нужную, отправив ее ид, например, в гете

Спасибо. А как реализовать 1 вариант?

средствами css прячете "вторые" два селекта
кидаете одному из "вторых" селектов ид=авто, второму ид=мото (соответственно value у option'ов первого)
по onchange передаете в функцию value первого селекта (там будет value выбранного option'a) и document.getElementById('тут value').style.display = 'block';

Цитата:

Сообщение от Viral (Сообщение 362160)

по onchange передаете в функцию value первого селекта (там будет value выбранного option'a) и document.getElementById('тут value').style.display = 'block';

Извините, но тут я немного не понял. Как это будет выглядеть в JS? Дело в том, что я как-то больше на php знаюсь... А вот с JS как-то не особо дружу..

Если грубо...

<select name='category' onchange="document.getElementById(this.value).style.display='block';">
  <option value="0">--Выберите--</option>
  <option value="auto">AUTO</option>
  <option value="moto">MOTO</option>
</select>

<select id='moto' style='display:none;'>
  <option value="avto">первый</option>
  <option value="moto">первый</option>
</select>

<select id='auto' style='display:none;'>
  <option value="avto">второй</option>
  <option value="moto">второй</option>
</select>

Ок. Буду ковырять. Спасибо.

Да. Практически то, что нужно. Только вот когда выбираешь значение в первом селекте, второй появляется. А вот когда снова изменяешь значение в первом селекте, появляется еще один "второй" селект, а первый никуда не девается. Как его убрать можно?

Добрый день. Мне всетаки удалось реализовать изменение selectov, но вот перестала работать кнопка submit.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Склад - ФГ ПРЕСТИЖ АГРОЛЮКС</title>
	<link rel="stylesheet" href="css/style_add.css" media="screen" type="text/css" />
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

</head>

<body>

<script type="text/javascript">
 function go(i_page)
  {
    var val_i_page = i_page.value;
    document.getElementById('i_page1').style.display=(val_i_page==1) ? "" : "none";
    document.getElementById('i_page2').style.display=(val_i_page==2) ? "" : "none";
  }
</script>

<!-- Фильтр - ВВОДИМ только цифры -->
<script>
function filter_input(e,regexp)
{
 e=e || window.event;
 var target=e.target || e.srcElement;
 var isIE=document.all;

 if (target.tagName.toUpperCase()=='INPUT')
  {
    var code=isIE ? e.keyCode : e.which;
    if (code<32 || e.ctrlKey || e.altKey) return true;

    var char=String.fromCharCode(code);
    if (!regexp.test(char)) return false;
  }
  return true;
}
</script>
<!-- Фильтр - ВВОДИМ только цифры -->



  <div id="login">
  <div class="flip">
    <div class="form-signup">
      <h1>Приход продукта</h1>
      <fieldset>
      <p class="login-msg"></p>
        <form action="save_profit.php" method="post">

<select onChange="javascript: go(this);">
<option value="1">ЗЕРНО</option>
<option value="2">ХИМИЯ</option>
</select>


<div id="i_page1">
<?php 
     include ("sklad_db.php"); 
     $res =  mysql_query("SELECT productname FROM product WHERE category='corn' ORDER BY productname",$sklad_db); 
         
     echo" 
     <select name='productname' required> 
         <option value=''  disabled selected>ПРОДУКТ</option>"; 
     while($row = mysql_fetch_assoc($res)){ 
         ?> 
         <option value="<?=$row['productname']?>"><?=$row['productname']?></option>
         <? 
} echo "</select>"; ?>
</div>
 
<div id="i_page2" style="display: none">
<?php 
     include ("sklad_db.php"); 
     $res =  mysql_query("SELECT productname FROM product WHERE category='chemicals' ORDER BY productname",$sklad_db); 
         
     echo" 
     <select name='productname' required> 
         <option value=''  disabled selected>ПРОДУКТ</option>"; 
     while($row = mysql_fetch_assoc($res)){ 
         ?> 
         <option value="<?=$row['productname']?>"><?=$row['productname']?></option>
         <? 
} echo "</select>"; ?>
</div>

<input type="text" name="amount" placeholder="КІЛЬКІСТЬ" maxlength="50" onkeypress="return filter_input(event,/^[\d.]+$/)" required />

<?php 
     include ("sklad_db.php"); 
     $res =  mysql_query("SELECT contractorname FROM contractor ORDER BY contractorname",$sklad_db); 
         
     echo" 
     <select name='contractorname1' required> 
         <option value=''  disabled selected>ОТКУДА ПРИШЛО</option>"; 
     while($row = mysql_fetch_assoc($res)){ 
         ?> 
         <option value="<?=$row['contractorname']?>"><?=$row['contractorname']?></option>
         <? 
} echo "</select>"; ?>
<?php 
     include ("sklad_db.php"); 
     $res =  mysql_query("SELECT contractorname FROM contractor ORDER BY contractorname",$sklad_db); 
         
     echo" 
     <select name='contractorname2' required> 
         <option value=''  disabled selected>КУДА ПРИШЛО</option>"; 
     while($row = mysql_fetch_assoc($res)){ 
         ?> 
         <option value="<?=$row['contractorname']?>"><?=$row['contractorname']?></option>
         <? 
} echo "</select>"; ?>



          <input type="submit" value="ДОБАВИТЬ" />
        </form>
      </fieldset>
    </div>
   </div>
</div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="js/index.js"></script>

</body>
</html>