文本输入、选择和单选按钮以及如何在 div 查询中更改“价格”的值？答案

【问题标题】：text input, select and radio buttons and how to change value of 'price' within a div query?文本输入、选择和单选按钮以及如何在 div 查询中更改“价格”的值？
【发布时间】：2014-08-28 20:06:48
【问题描述】：

我有一个包含文章数量的文本输入、一个代表文章类型的下拉菜单和两个代表是或否的单选按钮，无论用户是否喜欢专家。所以：

    <input class="form-control" type="text" name="article_number" id="article_number">
    <select class="form-control" name="scribbles" id="scribbles">
    <option id='49' value='standard_blog_post'>Standard Blog Post</option>
    <option id='59' value='long_blog_post'>Long Blog Post</option>
    <option id='69' value='website_page'>Website Page</option>
    <option id='299' value='white_paper'>White Paper</option>
    <option id='50' value='tweets'>Tweets</option>
    <option id='75' value='facebook_posts'>Facebook Posts</option>
    <option id='49' value='email_newsletter'>Email Newsletter</option>
    <option id='149' value='press_release'>Press Release</option>
    <option id='199' value='video_script'>Video Script</option>
    </select>
    <input type="radio" name="expert" value="yes">Yes I Need An Expert<br>
    <input type="radio" name="expert" value="no">No I don't need An Expert
    <div id="finalprice"></div>

我已将选择下拉列表的 ID 设置为每种相关文章的“价格”。专家将每种文章类型的价格翻倍。根据我上面列出的所有变量，您将如何使用所有这些信息在最终价格 div 中显示价格？

【问题讨论】：

好的，你的HTML很酷，现在你试过的jQuery在哪里？（旁注：数字 ID 仅在 HTML5 中有效...）
您忘记发布您尝试过的 JavaScript。

标签： jquery forms select input

【解决方案1】：

使用您现有的 HTML，这里有一个 jQuery 脚本，可以为您提供所需的内容。

$(document).ready(function() {
    $('#scribbles, [name="expert"]').on("change", showPrice);
});

function showPrice() {
    var price = $("#scribbles option:selected").attr('id');
    if ($('[name="expert"]:checked').val() === "yes")
        price *= 2;
    $("#finalprice").text(price);
}

小提琴here

【讨论】：