更改下拉项目答案

【问题标题】：Changing items of drop down更改下拉项目
【发布时间】：2012-01-26 07:46:08
【问题描述】：

我的页面上有四个下拉列表：

1. A  
  -100  
  -75  
  -50  
  -25  

2. B 
3. C  
4. D

当我在下拉列表 A 中选择 100 时，其他下拉列表应该包含 A 中的项目，但所选项目除外。应该是这样的：

在选择一个时，其他下降的相同。它应该是这样的：

我怎么能这样做？

这是我编写的唯一代码：

<select id = "A" name = "A">
    <option value = "c1">-a-</option>               
    <option value  = "100">100</option>
    <option value  = "75">75</option>
    <option value  = "50">50</option>
    <option value  = "25">25</option>
</select>  

<select  id = "B" name = "B">
    <option value = "c2">-b-</option>   
</select>

<select id = "C" name = "C">
    <option value = "c3">-c-</option>   
</select>

<select  name = "D" id = "D">
    <option value = "c4">-d-</option>   
</select>

【问题讨论】：

"我在 php 中有四个下拉列表" - 不，你没有。 PHP 是服务器端脚本，PHP 中没有用户界面。
@k102 - 我如何通过js实现它？。
@Martin - 你说我没有是什么意思？
您绝对应该在此处发布您的一些代码，并可能将您的问题重新标记为 html、javascript。
如果您在每次更改下拉列表时都发出服务器请求，您可以通过 php 执行此操作。不过不是很方便。

标签： javascript html

【解决方案1】：

您可以通过使用ajax调用然后加载您想要的内容来实现这一点，这也可以通过使用简单的javascript来实现。

<?php
$type=$_GET["q"];
switch($type)
{ case '100': ?>
<select class="select" name="subtype" id="subtype">
  <option value="c2" >-b-</option>
  <option value="75">75</option>
<?php break; ?>

在 ajax 调用后对此代码进行必要的更改，这会有所帮助。

【讨论】：

【解决方案2】：

给你

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('select').change(function(e){
        var selectedObj = $(this);

        selectedObj.nextAll().each(function(i, ele) {
            $(ele).html('');
            selectedObj.children('[value!='+selectedObj.val()+']').each(function(j, option){
                $(ele).append($(option).clone());
            });
        });
    });
});

</script>
</head>
<body>
<select name="a" id="a">
    <option value="-">-</option>
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
    <option value="400">400</option>
</select>

<select name="b" id="b">
    <option value="-">-</option>
</select>

<select name="c" id="c">
    <option value="-">-</option>
</select>

<select name="d" id="d">
    <option value="-">-</option>
</select>

</body>
</html>

【讨论】：