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

Posted 2023-02-22

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

【英文标题】：Javascript producing a value into a form textbox on selection

【发布时间】：2013-05-10 18:21:01

【问题描述】：

试图弄清楚如何使用 javascript 在表单的文本框中动态生成文本。

我想从我所做的下拉列表中选择一种事件类型，然后在该选择中将一个值输入到 eventprice 表单的文本框中。

到目前为止，这就是我所拥有的，但我没有在文本框中产生任何价值，任何帮助表示赞赏。

  function totalprice()
        if($('#type').val() == '3')

        $('#eventprice') == ("45");
        

        



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

【问题讨论】：

只是说，你知道有 good proven 框架可以做这种事情（称为 data-绑定），对吧？ （KnockoutJS、EmberJS、AngularJS，列表很长）另外，请查看***.com/questions/16483560/…

你想在你的函数中做什么？我无法理解

另外，修复您当前的代码$('#eventprice'.val("45"); 而不是$('#eventprice') == ("45");

鉴于您的input 是disabled，它将如何处理onchange 事件？ （通常编程更改，例如受 JavaScript 影响的更改，不会触发 change 事件，除非专门这样做。）

【参考方案1】：

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

当值更改时，将所有选项的值与选择框中当前可见的值进行比较。 如果值相同，则将数据属性复制到另一个输入。

工作演示：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'));
    
  );
);

【讨论】：

有很多 DOM 库使用 $ ... 这不是 jQuery 特定的

【参考方案2】：

我推荐使用 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/

希望这会有所帮助:)

【参考方案3】：

按照建议将代码的第 3/4 行修改为 $('#eventprice').val("45");，除非该建议有语法错误。