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>

我们还将整个事情包裹在form中，因为它就是一个搜索表单。现在，一个简单的CSS规则来隐藏两个div。如果您需要使用Javascript来显示没有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/yijiang/rEtxM/1

用收音机，下拉列表和按钮显示所选的div

1 个答案: