подстановка из select'a
Добрый день. В js полный ноль. Много тем как подставить значение из селекта формы в input той же формы, но у меня немного другое.
Есть форма вида: <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <form action="" method="post" class="form-horizontal"> <select class="col-xs-12 choise" name="choise" required> <option value="">Выберите пункт списка</option> <option value="Audi">Вариант 1</option> <option value="BMW">Вариант 2</option> <option value="Mercedes">Вариант 3</option> <option value="ВАЗ">Вариант 4</option> <option value="УАЗ">Вариант 5</option> <option value="Велосипед">Вариант 6</option> </select> Срок сдачи: через <input type="text" name="srok" class="days" disabled> дней </form> Хитрость заключается в том, что необходимо подставлять в input число в зависимости от выбранного селекта. К примеру, для BMW - это 10. Для велосипеда - 15. В идеале бы вообще чтобы подставлялось значение даты плюс определённое количество дней. К примеру, для BMW = текущая дата + 10 дней. Для ВАЗ = текущая дата + 10 дней, а для велосипеда = текущая дата + 15 дней. Я так понимаю, тут должен быть оператор case, но с синтаксисом не дружу. Помогите пожалуйста. Заранее спасибо. ------ UPD. Получилось сделать if'ами на jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
function displayOtdel(){
var srok = 0;
var value = $(".choise").val();
if(value == "BMW") srok = 15;
if(value == "Велосипед") srok = 55;
if(value == "ВАЗ") srok = 10;
if(value == "Mercedes") srok = 7;
if(value == "УАЗ") srok = 10;
if(value == "AUDI") srok = 30;
$("input.days").val(srok);
}
$("select").change(displayOtdel);
displayOtdel();
});
</script>
<select name="otdel" class="choisel">
<option value=""></option>
<option value="Велосипед">Велосипед</option>
<option value="BMW">BMW</option>
<option value="ВАЗ">ВАЗ</option>
<option value="Mercedes">Mercedes</option>
<option value="AUDI">AUDI</option>
<option value="УАЗ">УАЗ</option>
</select>
<strong>Срок: через <input type="text" name="srok_end" class="days" size="11" value="" disabled><strong> дней</strong>
Но проблема в том, что jquery у меня должно вызываться в конце страницы. То есть после данного скрипта. Да и чувствую, что вариант с ифами не комильфо. Собственно, вопрос: можно ли как-нибудь сделать не на jquery и case'ом? |
Вообще, по уму, списки и прочие элементы оперируют не Audi, BMW м и.п., а уникальными идентификаторами, под которыми эти машинки хранятся в базе. А названия этих машинок как раз являются текстами опций списка.
Добавьте в опции значения периодов, вот так <option data-interval="10" value="BMW">Вариант 1</option>, и по изменению либо это значение в поле, либо с датой. Но вот что интересно - если сервер определяет эти интервалы дней для каждой опции списка (связаны по идентификатору), то он будет знать по выбранному в списке значению, какой интервал выбран, то есть слать ему еще и поле srok совсем не нужно. Для пользователя же его просто показывать на странице для информации, иначе то он может и свою циферь прислать. |
Но у меня эти значения в базе не хранятся. А вывести надо только единоразово: после отправки формы всё-равно новая дата покажется. То есть данный input нужен только для информации и нигде больше не используется.
|
А если не используется, то зачем полю ввода имя srok_end? Убирайте имя и это поле не будет отправляться на сервер. Да и вообще, оно совсем не нужно:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$('select').change(function() {
if(this.value) $('#day_end').text($(this).find(':selected').data('days'))
})
});
</script>
</head>
<body>
<select name="otdel" class="choisel">
<option data-days="10" value="">Выберите...</option>
<option data-days="15" value="Велосипед">Велосипед</option>
<option data-days="20" value="BMW">BMW</option>
<option data-days="25" value="ВАЗ">ВАЗ</option>
<option data-days="30" value="Mercedes">Mercedes</option>
<option data-days="35" value="AUDI">AUDI</option>
<option data-days="40" value="УАЗ">УАЗ</option>
</select>
<span id="day_end"></span>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:14. |