文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在表单中使用onChange更改内容

问如何在表单中使用onChange更改内容
EN

Stack Overflow用户

提问于 2013-05-23 01:20:21

回答 2查看 937关注 0票数 0

我在DIVs中有两种类型的内容。默认视图为div#BDT。现在，我想使用SELECT更改内容。

<form method="post" action="domain_reseller.html">
    <p align="right">Choose Currency:</p>
    <select name="currency" onchange="submit()">
        <option value="1" selected="selected">BDT for Bangladesh</option>
        <option value="2">USD For World Wide Country</option>
    </select>
</form>
<div class="USD" id="USD">
    This Is USD Currency
</div>

<div class="BDT" id="BDT">
    This Is USD Currency
</div>

http://russelhost.com/domain_reseller.html

onchange

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-05-23 01:47:05

首先，为两个DIVs提供相同的类，可能是"currency"，并使选项的值与DIVs的id相同：

<form method="post" action="domain_reseller.html">
    <p align="right">Choose Currency:</p>
    <select name="currency">
        <option value="BDT" selected="selected">BDT for Bangladesh</option>
        <option value="USD">USD For World Wide Country</option>
    </select>
</form>
<div class="currency" id="USD">
    This Is USD Currency
</div>
<div class="currency" id="BDT">
    This Is BDT Currency
</div>

然后在你的CSS中隐藏默认的货币div：

div.currency {
    display: none;
}

然后使用jQuery显示当前选择的货币，并在您选择其他选项时随时更新：

var currencySelect = $('select');

$('#' + currencySelect.val()).show();

currencySelect.change(function () {
    $('div.currency').hide();
    $('#' + $(this).val()).show();
});

Demo

票数 0

Stack Overflow用户

发布于 2013-05-23 01:40:25

使用jQuery怎么样？

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
//alert('Document is ready');
                $('select[name=currency]').change(function() {
                    var sel = $(this).val();
                    if (sel == 1) $('.report').html('Bangladeshi currency is required');
                    else  $('.report').html('USD currency is required');
                });

            });
        </script>
    </head>
<body>

<form method="post" action="domain_reseller.html">
    Choose Currency:<br>
    <select name="currency">
        <option value="1" selected>BDT for Bangladesh</option>
        <option value="2">USD For World Wide Country</option>
    </select>
</form>
<br>
<br>
<div class="report" id="report"></div>
<br>
<br>

</body>
</html>

一些注意事项：

您不需要提交表单就可以根据所选项目更改div的内容。
您不需要两个div。一个就行了。如果您希望拥有这两个div，您可以像这样显示/隐藏相应的div：

如果(sel == 1) { $('#BDT').show()；$('#USD').hide()；}else{ $('#USD').show()；$('#BDT').hide()；}

您可以获得一些有关使用jQuery from here或from here的优秀教程

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16697951

复制

相似问题

问如何在表单中使用onChange更改内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在表单中使用onChange更改内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在表单中使用onChange更改内容
EN