Javascript在选择时将值生成到表单文本框中

Javascript producing a value into a form textbox on selection

本文关键字：表单 文本 选择 Javascript      更新时间：2023-09-26

尝试找出如何使用javascript在表单的文本框中动态生成文本。

我想从下拉列表中选择一种类型的事件，我已经做了，并在该选择的值输入到eventprice表单的文本框。

到目前为止，这是我所拥有的，但我没有价值在文本框中产生，任何帮助都很感激。

  function totalprice(){
        if($('#type').val() == '3'){
        $('#eventprice') == ("45");
        }
        }

 <input type="text"  disabled="" id="eventprice" onChange="totalprice();" name="eventprice" class="form-input" />

如果您不介意使用jQuery，这将是一件轻而易举的事情:您只需要为每个选项添加数据属性price。这个函数的作用是:

  1. 将所有选项的值与更改值时选择框中当前可见的值进行比较。
  2. 如果值相同，则复制data-attribute到另一个输入。

工作演示:http://jsbin.com/acuyux/6/edit

HTML 

<select id="type">
    <option data-price="25">Party</option>
    <option data-price="35">Meeting</option>
    <option data-price="45">Lounge</option>
  </select>
 <input type="text"  id="eventprice" name="eventprice" disabled="" class="form-input" />

JS

$('#type').change(function totalprice(){
  $('option').each(function() {
    if($(this).val() === $('#type').val()) {
      $('#eventprice').val($(this).data('price'));
    }
  });
});

我推荐使用jQuery，因为它的代码很高效。

HTML: 

    <input type="text" disabled id="eventprice" />
  <select id="select">
    <option data-cost="5">Event 1</option>
    <option data-cost="10">Event 2</option>
  </select>
jQuery: 

    $('#select').change(function () {
        var str = $(this).find('option:selected').data('cost');
        $('#eventprice').val(str);
    });
    // This code can be used to run it on load
  // $('#select').trigger('change');

实际代码:
http://jsfiddle.net/LkaWn/

希望这对你有帮助

按照建议将代码的第三/第四行修改为$('#eventprice').val("45");，但建议存在语法错误。

相关文章：