Question

我在DIV中有两种类型的内容。默认视图为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

Answer 1

如何使用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：
```
if (sel == 1) {
    $('#BDT').show();
    $('#USD').hide();
}else{
    $('#USD').show();
    $('#BDT').hide();
}
```

您可以获得有关使用jQuery from here或from here

Answer 2

首先给你的DIV同一个类，也许是“货币”，并使OPTION的值与DIV的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

如何使用表单中的onChange更改内容

2 个答案: