相关单选按钮和下拉列表答案

【问题标题】：Related Radio buttons and Drop down list相关单选按钮和下拉列表
【发布时间】：2011-07-03 22:07:04
【问题描述】：

我正在尝试制作一个表单，其中有许多单选按钮（动态创建）和一个下拉列表。

在下拉列表中我有数字。我希望下拉列表取决于当前按下的单选按钮，这意味着，如果我按下第一个按钮，下拉列表中出现的最大数字将为值 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 库。仍然，下拉列表在单选按钮单击时不会改变。

谢谢！

【问题讨论】：

@Ian Moss 这与这个问题有什么关系？
@Ian Moss：你在说什么？这不是印地语问答网站。

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

【解决方案1】：

我不确定我是否正确理解你的问题，但我曾经做过类似的事情，我所做的是输出所有下拉列表并用 css 隐藏它们，然后单击单选按钮取消隐藏我需要使用 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>

【讨论】：

你好，脚本在 jsfiddle 上看起来不错，可以满足我的需要。我尝试在我的项目中使用它，但它在那里不起作用......下拉列表不会改变。我在模板中包含了 javascript 脚本，但是……我还应该在某处包含一些库吗？我错过了什么？我怎样才能让那个js小脚本加载到我的单选按钮？非常感谢
它使用 Jquery，所以你也需要添加它。 jsfiddle 默认包含这个。
对不起，我已经包含了 jquerym 但仍然......没有魔法。下拉列表根本没有改变...
Js fiddle 没有说明 ;-) 你只需打开它，将 html 添加到 html 窗格，将 js 添加到 js 窗格，将 css 添加到 css 窗格，然后单击运行。并选择左侧的jquery。
我更改了你粘贴的代码，现在试试，你忘记了 $(document).ready(function() {jquerycode here});围绕 jquery 脚本。你也可以使用 $(function() {jquerycode here});相反，它基本相同，但更短。