Javascript 相关单选按钮和下拉列表_Javascript_Php_List_Radio Button_Html Lists

Javascript 相关单选按钮和下拉列表

javascript php list

Javascript 相关单选按钮和下拉列表,javascript,php,list,radio-button,html-lists,Javascript,Php,List,Radio Button,Html Lists,我正在尝试制作一个表单，其中有许多单选按钮（动态创建）和一个下拉列表在下拉列表中我有数字。我希望下拉列表取决于当前按下的单选按钮，这意味着，如果我按下第一个按钮，下拉列表中出现的最大数字将是一个值x，如果我按下另一个单选按钮，将是一个值y。此值表示一个php变量做这件事最简单的方法是什么谢谢大家! 编辑：我试过： <html> <head> <style> #ca { display: none; } </sty

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

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


#ca{
显示：无；
}
$（文档）.ready（函数（）{
$（“输入：收音机”）。单击（函数（）{
$（'.searchSelect'）.hide（）；
$（'#'+$（this.attr（“value”））.show（）；
});
});


美国


加拿大


各部门
服装及；配件
汽车
各部门
书
音乐

还包括：jQuery1.5库。不过，单击单选按钮时下拉列表不会更改

谢谢大家!

我不确定我是否正确理解你的问题，但我曾经做过类似的事情，我所做的是输出所有dropdownlists并用css隐藏它们，然后单击radiobutton使用jquery取消隐藏我需要的dropdownlist

使用show（）和hide（）可以缩短时间

以下或此处显示整个页面：


#ca{
显示：无；
}
$（文档）.ready（函数（）{
$（“输入：收音机”）。单击（函数（）{
$（'.searchSelect'）.hide（）；
$（'#'+$（this.attr（“value”））.show（）；
});
});


美国


加拿大


各部门
服装及；配件
汽车
各部门
书
音乐

您好，这个脚本在JSFIDLE上看起来很不错，可以满足我的需要。我试着在我的项目中使用它，但它在那里不起作用。。。下拉列表不显示；不要改变。我在模板中包含了javascript脚本，但是。。。我是否应该在某处包括一些图书馆？我错过了什么？如何将js小脚本加载到我的单选按钮？感谢Lott使用Jquery，所以您也需要添加它。默认情况下，JSFIDLE已经包含了它。对不起，我已经包含了jquerym，但仍然。。。没有魔法。下拉列表根本没有改变…Js fiddle没有任何说明；-）您只需打开它，将html添加到html窗格，将js添加到js窗格，将css添加到css窗格，然后单击run。我更改了您粘贴的代码，现在试试，您忘记了$（document）.ready（function（）{jquerycode here}）；围绕jquery脚本。您还可以使用$（function（）{jquerycode here}）；取而代之的是，它基本上是一样的，但比较短。@Ian Moss这和这个问题有什么关系？@Ian Moss:你在说什么？这不是印地语问答网站。

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

    <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>