相关单选按钮和下拉列表

时间:2011-02-24 22:03:46

标签: javascript php list radio-button html-lists

我正在尝试创建一个表单,其中有多个单选按钮(动态创建)和下拉列表。

在下拉列表中,我有数字。 我希望下拉列表取决于当前按下的单选按钮,这意味着,如果我按下第一个按钮,下拉列表中出现的最大数字将是值x,如果我按下另一个无线电将是值y 。这个值代表一个php变量。

做这件事最简单的方法是什么?

谢谢!

编辑:

我试过了:

<html>
<head>
<style>
    #ca {
        display: none;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $("input:radio").click(function() {
        $('.searchSelect').hide();
        $('#' + $(this).attr("value")).show();
    });
});
</script>
</head>
<body>
    <ul id="countrylist"> 
        <li> 
            <label for="US-country"> 
                <input name="store" id="US-country" type="radio" value="com" checked="checked" /> 
                USA</label> 
        </li> 
        <li> 
            <label for="CA-country"> 
                <input name="store" id="CA-country" type="radio" value="ca"/> 
                Canada</label> 
        </li> 
    </ul> 
    <select name="search-alias-us" id="com" class="searchSelect" title="Search in"> 
        <option value="aps" selected="selected">All Departments</option> 
        <option value="apparel">Apparel &amp; Accessories</option> 
        <option value="automotive">Automotive</option> 
    </select> 
    <select name="search-alias-ca" id="ca" class="searchSelect" title="Search in"> 
        <option value="aps" selected="selected">All Departments</option> 
        <option value="stripbooks">Books</option> 
        <option value="popular">Music</option> 
    </select>
</body>
</html>

还包括:jquery 1.5库。仍然,单击单击按钮时下拉列表不会改变。

谢谢你!

1 个答案:

答案 0 :(得分:1)

我不确定我是否理解你的问题,但我曾经做过类似的事情,我做的是输出所有下拉列表并用css隐藏它们然后点击radiobutton unhid我需要使用jquery的下拉列表

http://jsfiddle.net/6svcD/

使用show()和hide()

可以更短
$(function() {
    $("input:radio").click(function () {
       $('.searchSelect').hide();
       $('#' + $(this).attr("value")).show();
    });
});

以下或整个页面:http://jsfiddle.net/MrAGF/1/

    <html>
<head>
<style>
    #ca {
        display: none;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $("input:radio").click(function() {
        $('.searchSelect').hide();
        $('#' + $(this).attr("value")).show();
    });
});
</script>
</head>
<body>
    <ul id="countrylist"> 
        <li> 
            <label for="US-country"> 
                <input name="store" id="US-country" type="radio" value="com" checked="checked" /> 
                USA</label> 
        </li> 
        <li> 
            <label for="CA-country"> 
                <input name="store" id="CA-country" type="radio" value="ca"/> 
                Canada</label> 
        </li> 
    </ul> 
    <select name="search-alias-us" id="com" class="searchSelect" title="Search in"> 
        <option value="aps" selected="selected">All Departments</option> 
        <option value="apparel">Apparel &amp; Accessories</option> 
        <option value="automotive">Automotive</option> 
    </select> 
    <select name="search-alias-ca" id="ca" class="searchSelect" title="Search in"> 
        <option value="aps" selected="selected">All Departments</option> 
        <option value="stripbooks">Books</option> 
        <option value="popular">Music</option> 
    </select>
</body>
</html>