Question

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

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>

Answer 1

你去吧

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

Answer 2

你可以通过使用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 个答案: