Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2015, 20:51
Новичок на форуме
Отправить личное сообщение для metaforos Посмотреть профиль Найти все сообщения от metaforos
 
Регистрация: 19.03.2015
Сообщений: 7

select onchange
Доброго времени суток. Помогите пожалуйста. Я не силен в 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"? Может я ошибаюсь и есть еще варианты?
Ответить с цитированием
  #2 (permalink)  
Старый 19.03.2015, 20:54
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

нуда, onchange
А дальше три варианта:
1) Оба "вторых" селекта изначально скрыты, показываете нужный по onchange
2) По onchange аяксом подгружаете один из "вторых" селектов
3) (жуть) сабмит формы с селектом по onchange и на пыхе показывать нужную, отправив ее ид, например, в гете
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2015, 20:56
Новичок на форуме
Отправить личное сообщение для metaforos Посмотреть профиль Найти все сообщения от metaforos
 
Регистрация: 19.03.2015
Сообщений: 7

Спасибо. А как реализовать 1 вариант?
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2015, 21:00
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

средствами css прячете "вторые" два селекта
кидаете одному из "вторых" селектов ид=авто, второму ид=мото (соответственно value у option'ов первого)
по onchange передаете в функцию value первого селекта (там будет value выбранного option'a) и document.getElementById('тут value').style.display = 'block';
Ответить с цитированием
  #5 (permalink)  
Старый 19.03.2015, 21:07
Новичок на форуме
Отправить личное сообщение для metaforos Посмотреть профиль Найти все сообщения от metaforos
 
Регистрация: 19.03.2015
Сообщений: 7

Сообщение от Viral Посмотреть сообщение
по onchange передаете в функцию value первого селекта (там будет value выбранного option'a) и document.getElementById('тут value').style.display = 'block';
Извините, но тут я немного не понял. Как это будет выглядеть в JS? Дело в том, что я как-то больше на php знаюсь... А вот с JS как-то не особо дружу..
Ответить с цитированием
  #6 (permalink)  
Старый 19.03.2015, 21:12
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

Если грубо...
<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>
Ответить с цитированием
  #7 (permalink)  
Старый 19.03.2015, 21:23
Новичок на форуме
Отправить личное сообщение для metaforos Посмотреть профиль Найти все сообщения от metaforos
 
Регистрация: 19.03.2015
Сообщений: 7

Ок. Буду ковырять. Спасибо.
Ответить с цитированием
  #8 (permalink)  
Старый 19.03.2015, 21:32
Новичок на форуме
Отправить личное сообщение для metaforos Посмотреть профиль Найти все сообщения от metaforos
 
Регистрация: 19.03.2015
Сообщений: 7

Да. Практически то, что нужно. Только вот когда выбираешь значение в первом селекте, второй появляется. А вот когда снова изменяешь значение в первом селекте, появляется еще один "второй" селект, а первый никуда не девается. Как его убрать можно?
Ответить с цитированием
  #9 (permalink)  
Старый 20.03.2015, 12:14
Новичок на форуме
Отправить личное сообщение для metaforos Посмотреть профиль Найти все сообщения от metaforos
 
Регистрация: 19.03.2015
Сообщений: 7

Добрый день. Мне всетаки удалось реализовать изменение selectov, но вот перестала работать кнопка submit.
Ответить с цитированием
  #10 (permalink)  
Старый 20.03.2015, 12:20
Новичок на форуме
Отправить личное сообщение для metaforos Посмотреть профиль Найти все сообщения от metaforos
 
Регистрация: 19.03.2015
Сообщений: 7

<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Select и onchange Rorbi Элементы интерфейса 6 28.05.2014 12:42
событие onchange для select sasha001ua Мобильный JavaScript 0 20.05.2014 19:55
select, checkbox, onchange olnew Элементы интерфейса 4 25.03.2013 22:46
Не работает onchange для select в ie LizzarD Events/DOM/Window 2 22.05.2012 15:39
select + onchange + selected Harosh Элементы интерфейса 2 23.01.2011 04:39