2016-06-26 6 views
0

В настоящее время я назначаю результат вычисления элементу <p>, и я хотел бы сделать то же назначение в поле ввода.Поместите результат jquery во входное поле

Вот мой код.

HTML

<select id="selector" onChange="Expedisi(this);"> 
      <option>Select product</option> 
      <optgroup label="Sedan"> 
      <option value="Lancer EX">Lancer EX 1.6/2.0</option> 
      <option value="Lancer EX GT">Lancer EX GT</option> 
      <optgroup label="Sport"> 
      <option value="Lancer Evolution X">Lancer Evolution X</option> 
      <optgroup label="SUV"> 
      <option value="Outlander">Outlander</option> 
     </select> 

<p id="thetotal"> </p> 

JavaScript

$('#selector').on('change', function() { 
    total = data[$(this).val()].price; 

    $('#thetotal').text("" + total); 
}) 

change обработчик будет выполнить задание, на основе которого была выбрана опция в #selector элемента. Я знаю, как получить значение выбранного параметра и как вычислить total, так как я уже назначаю это элементу <p>.

Как присвоить такое же значение элементу input? Мне просто нужно знать, какой метод jQuery используется для установки значения входного элемента.

+0

Вы хотите [установить опцию селектора] (https://stackoverflow.com/questions/19252664/how-can-i-programmatically-change-a-select-box-selection-from-within- -control) или [установить текстовое поле] (https://stackoverflow.com/questions/6668364/how-to-change-the-value-of-a-readonly-textbox-using-jquery)? –

ответ

0

Вы были очень близки в своем коде Jquery. Способ установки содержимого текстового поля ввода - это метод .val(). Используя это, ваш код будет выглядеть следующим образом:

$('#selector').on('change', function() { 
    var total = data[$(this).val()].price; 

    $('#thetotal').val("" + total); 
}); 

Два дополнительное улучшение было сделано здесь, в случае, если они существуют в реальном коде:

  • Добавлена ​​var переменного присвоения total, так что код не случайно создать (или хуже, перезапись) глобальную переменную
  • Добавлен ; в конце кода, после регистрации обработчика событий обратного вызова

Назначение total предполагает, что в области есть переменная с именем data, и эта переменная имеет элементы со значениями, соответствующими параметрам в #selector. Это означает, что data будет выглядеть примерно так:

var data = { 
    "Lancer EX": { price: 17995 }, 
    "Lancer EX GT": { price: 21873 }, 
    "Lancer Evolution X": { price: 26434 }, 
    "Outlander": { price: 21659 } 
}; 

Эти данные полностью составлен, на основе структуры данных, так что не полагаться на него что-нибудь, кроме понимания кода. Вас предупредили.

+0

Да, сейчас он работает, спасибо за вашу информацию – John

0

Если вы хотите, чтобы отобразить общее количество в поле ввода, просто поместите этот код в onchange обратного вызова:

var input = document.querySelector('input'); // your input field 
input.value = total;