0

我在 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

4

2 回答 2

0

使用 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>

一些注意事项：

  1. 您无需提交表单即可根据所选项目更改 div 的内容。

  2. 你不需要两个div。一个会做的。如果您希望拥有两个 div，您可以像这样显示/隐藏适当的 div：

    if (sel == 1) {
    $('#BDT').show();
    $('#USD').hide();
}else{
    $('#USD').show();
    $('#BDT').hide();
}

你可以从这里或从这里获得一些关于使用 jQuery 的好教程

于 2013-05-22T17:40:24.757 回答
0

首先为您的两个 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();
});

演示

于 2013-05-22T17:47:05.327 回答