使用Javascript根据下拉菜单选择填充输入字段 [英] Filling input field based on dropdown menu selection with Javascript

问题描述

在MySQL数据库中，我有一个项目表，其中包含该项目的ID，名称和默认价格.我希望有一个表格，该表格带有表格中所有项目的下拉菜单，可以将输入字段中的价格更改为所选项目的默认价格.我到底该如何使用Javascript执行此操作?预先感谢.

解决方案

HTML:

<select>
    <option>Select an item</option>
    <option data-price="20.00" value="1">Item 1</option>
    <option data-price="15.00" value="2">Item 2</option>
    <option data-price="24.00" value="3">Item 3</option>
</select>

<input type="text" id="price">

JavaScript(使用jQuery):

​$('select').on('change', function() {
    $("select option:selected").each(function () {
        $('#price').val('$' + $(this).attr('data-price'));
    });    
});​​​​​​​​

并查看此jsFiddle的工作示例: http://jsfiddle.net/chnUn/

In a MySQL database, I have a table of items with the item's ID, name and default price. I wish to have a form with a drop-down menu of all the items in the table that changes the price in an input field to the default price of the item selected. How exactly would I go about doing this with Javascript? Thanks in advance.

解决方案

HTML:

<select>
    <option>Select an item</option>
    <option data-price="20.00" value="1">Item 1</option>
    <option data-price="15.00" value="2">Item 2</option>
    <option data-price="24.00" value="3">Item 3</option>
</select>

<input type="text" id="price">

​ JavaScript (using jQuery):

​$('select').on('change', function() {
    $("select option:selected").each(function () {
        $('#price').val('$' + $(this).attr('data-price'));
    });    
});​​​​​​​​

And see this jsFiddle for a working example: http://jsfiddle.net/chnUn/

这篇关于使用Javascript根据下拉菜单选择填充输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！