Question

当他/她点击“按钮”时，我试图根据用户选择的值显示一些不同的div。这是我的剧本：

$(document).ready(function(){
$('#divarea1').hide();
$('#divarea2').hide();
$('#divarea3').hide();

    $('#go-button').click(function() {
     var whatToShow = $('#dropdown').val();
        if (whatToShow = ref1) {
            $('#divarea1').show();
            }
        else if (whatToShow = ref2) {
            $('#divarea2').show();
            }
        else {
            $('#divarea3').show();
            }
});
});

这是我的HTML：

<form name="ref-selector" method="POST" ACTION="URL">
    <select id="dropdown" name="dropdown"> 
        <option value="ref1">Book</option>
        <option value="ref2">Journal</option>
        <option value="ref3">Webpage</option>
    </select>
    <input type="button" id="go-button" value="Go">
</form>


<div id="divarea1">
<p>Some random content</p>
</div>

<div id="divarea2">
<p>Some other random content</p>
</div>

<div id="divarea3">
<p>The last random content</p>
</div>

我希望你们中的一些人能够帮助我。我试图寻找解决方案，但似乎没有什么是我正在寻找的东西，而且我无法从我读过的其他内容中找到它。

Answer 1

我建议您将<div />的ID作为选项的值。这将禁止您使用if-else。

试试这个：

<form name="ref-selector" method="POST" ACTION="URL">
    <select id="dropdown" name="dropdown"> 
        <option value="ref1">Book</option>
        <option value="ref2">Journal</option>
        <option value="ref3">Webpage</option>
    </select>
    <input type="button" id="go-button" value="Go">
</form>


<div id="divarea-ref1">
<p>Some random content</p>
</div>

<div id="divarea-ref2">
<p>Some other random content</p>
</div>

<div id="divarea-ref3">
<p>The last random content</p>
</div>

使用此JavaScript代码，您可以添加任意数量的下拉项目，其中包含任意数量的div，其ID的格式为divarea-{dropdown.value}

$(document).ready(function () {
    $('div[id^=divarea-]').hide();

    $('#go-button').click(function () {
        var whatToShow = $('#dropdown').val();

        $('div[id^=divarea-]').hide();
        $('#divarea-' + whatToShow).show();
    });
});

如何从点击下拉菜单中显示基于div的值？

1 个答案: