0

День добрый.

Есть вопрос по javascript. Уверен, для знатоков здесь все просто. Опишу суть задачи. Кусок кода формы:

<tr>
<td>
<select name="tovar1">
<option value="1">sklad1</option>
<option value="2">sklad2</option>
</select>
</td>
<td>
Цена: 1000
</td>
</tr>

В БД для каждого товара (tovar1) есть несколько цен в зависимости от склада (sklad1, sklad2). Нужно, чтобы в зависимости от выбора склада для данного товара динамически менялось поле "цена". Грубо говоря, мы переключаем склады в теге select и цена меняется на нужную. как в примере, для 1го склада - цена 1000, для второго - 1500.

Дело еще в том, что на генерируемой странице будет много таких товаров, соотв. изменение каждого select'a должно отражаться на соответствующем изменении текста.

Если можно, приведите пример для нескольких позиций. Заранее огромное спасибо!

2 ответа 2

2
<tr>

 <td>
  <select onchange='changePrice(this)' name="tovar1">
   <option value="1000">sklad1</option>
   <option value="1001">sklad2</option>
  </select>
 </td>

 <td>
  Цена: <span id='price'>1000</span>
 </td>

</tr>

function changePrice(obj){
  var price = obj.value;
  document.getElementById('price').innerHTML = price;
}
2
  • Проблема решена. Итак, было 2 проблемы: 1. Как оказалось, нужно было прописать var s = document.getElementById('prices'+pid).document.getElementsByTagName('span'); вместо var s = document.getElementById('prices'+pid).getElementsByTagName('span'); 2. Не смейтесь сильно, но 2 часа убил на поиск решения проблемы. Дело в том, что в тексте была описка и вместо s[i].style.display = 'none'; стояло s[i].style.dispay = 'none'; (и еще в одном месте) Но за помощь, конечно, спасибо! P.S. За основу взял 2й вариант, автора ling, за что ему огромное спасибо.
    – kiruhin
    14 фев 2012 в 23:54
  • Поспешил я с выводами :( Работает только в IE. Хром, ФФ, Опера - напрочь отказываются исполнять скрипт. Более того, bugZilla выдает ошибку document.getElementById("prices" + pid) is null В чем может быть проблема?
    – kiruhin
    15 фев 2012 в 0:03
0

"Наивный" способ. =)

<tr>
    <td>
        <select name="tovar123" onchange="chPrice(123, this.value)">
            <option value="10">sklad1</option>
            <option value="11">sklad2</option>
        </select>
    </td>
    <td id="prices123">
        Цена:
        <span id="price123_10" class="price">1000</span>
        <span id="price123_11" class="price" style="display:none">1500</span>
    </td>
</tr>

<script>
function chPrice(pid, sid){
    var s = document.getElementById('prices'+pid).getElementsByTagName('span');
    for(i = 0, il = s.length; i < il; ++i){
        if(/price/.test(s[i].className)){
            s[i].style.display = 'none';
        }
    }
    document.getElementById('price'+pid+'_'+sid).style.display = '';
}
</script>
10
  • Соррь а зачем скрытие поля?? и тд. если у него там миллион складов???
    – KARTOH
    14 фев 2012 в 11:22
  • 1
    Ну не ajax'ом же. Можно задать атрибутом в option.
    – ling
    14 фев 2012 в 11:25
  • мой вариант ниже, просто с value опции вытаскивать. но суть вопроса другая) почему ты воспользовался скрытыми полями??? это просто предпочтение или в этом есть какой прикол?
    – KARTOH
    14 фев 2012 в 11:32
  • Как я понял, значение в select'ах надо сохранить для добавления товаров в корзину, например. Поэтому значение надо размещать либо в атрибуте, либо в теге. Мне больше нравится работать со статическим контентом.
    – ling
    14 фев 2012 в 12:30
  • а) спс за ответ)
    – KARTOH
    14 фев 2012 в 12:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.