使用单选按钮、下拉菜单和按钮显示选定的 div

Question

a 有一个页面，其中包含：

<input type="radio" id="oqcline" class="section"/>OQC Line
<input type="radio" id="oqcbalance" class="section"/>Balance

<br/><br/>
Month
<select id="search_month" class="searchqp" name="search_month">
Year
<select id="search_year" class="searchqp" name="search_year">
<button id="search" type="button" class="ui-state-default ui-corner-all"><span>Search </span></button>

我有两个用于显示数据的 div：

<div id="data">
<div id="list">

我想要这样：

if click "oqcline"-> select month and year ->click search->"data" can show,"list" hidden
if click "balanceline" -> select month and year ->click search->"list" can show,"data" hidden

你能告诉我如何做到这一点吗？

Answer 1

首先，您需要清理 HTML - 使用 label 标签作为标签，并为单选按钮 input 元素指定一个 name 以便将它们分组在一起。

<form id="ocq">
    <input type="radio" name="section" id="oqcline" class="section" value="line" />
    <label for="oqcline">OQC Line</label>
    <input type="radio" name="section" id="oqcbalance" class="section" value="balance" />
    <label for="oqcbalance">Balance</label>

    <label for="search_month">Month</label>
    <select id="search_month" class="searchqp" name="search_month">
        <option>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
    </select>
    <label for="search_year">Month</label>
    <select id="search_year" class="searchqp" name="search_year">
        <option>1994</option>
        <option>1995</option>
        <option>1996</option>
        <option>1997</option>
        <option>1998</option>
    </select>

    <button id="search" class="ui-state-default ui-corner-all">Search</button>
</form>

<div id="data">Data</div>
<div id="list">List</div>

我们还将整个内容包装在一个表单中，因为它就是这样 - 一个搜索表单。现在，一个简单的 CSS 规则可以隐藏两个 div。如果您需要向没有 Javascript 的用户显示它们，您可能需要使用 Javascript 进行隐藏。

#data, #list {
    display: none;
}

最后是 jQuery。这将检查表单的提交并取消默认的浏览器操作，然后根据选择的单选按钮显示/隐藏正确的 div

var data = $('#data'),
    list = $('#list');

$('#ocq').submit(function(){
    var value = $(':radio[name="section"]:checked').val();
    if(value  === 'line'){
        data.show();
        list.hide();
    } else if(value  === 'balance') {
        list.show();
        data.hide();
    }

    return false;
});

看一下现场演示：http://jsfiddle.net/yijian/rEtxM/1