选择另一个下拉值（Jquery）后删除下拉项目

当使用Jquery在Drop Down 1中选择ItemX时，我想从下拉菜单（下拉菜单2）中删除项目（ItemX）。选择另一个下拉值（Jquery）后删除下拉项目

我在某种方式工作;

<?php 
session_start(); 

?> 

<!doctype html> 
<html lang="en"> 
<head> 
<title>Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

</head> 

<body> 

<form action = 'testselectprocess.php' method='POST'> 

<div> 
<select id="cat"></select> <select id="items" disabled></select> 
</div> 

<script> 
$(document).ready(function(){ 

var c = '<option>Select</option>'; 
var cat1 = ["Honey", "Tree", "Chocolate"]; 
for (i=0; i < cat1.length; i++){ 
c += '<option>' + cat1[i] + '</options>'; 
} 
$('#cat') 
.html(c) 
.change(function(){ 
    var indx = this.selectedIndex - 1; 
    if (indx < 0) { 
    $('#items').empty().attr('disabled','disabled'); 
    return; 
    } 
    var item = '<option>Select an item</option>'; 
    for (i=0; i < cat1.length; i++){ 
    item += '<option>' + cat1[i] + '</options>'; 
    } 
    $('#items').html(item).removeAttr('disabled'); 
}); 

}); 

</script> 


</form> 

</body> 
</html>

在上面的代码中有两个下拉列表。其中都有三个值Honey，Tree,Chocolate。我需要，如果用户从第一个下拉列表中选择Honey，那么Honey应该是不可见的或从第二个下拉列表中删除。

来源

2017-05-01 Amar

小例子，可能会有帮助 https://jsfiddle.net/o2gxgz9r/6488/ – Nitesh

你不做任何检查，并没有添加所选的值，你只需要将所有项目从第一个选择复制到第二个。

因此，解决办法是验证，而不是复制选定的项目，如：用jQuery

<?php 

session_start(); 

?> 

<!doctype html> 
<html lang="en"> 
<head> 
<title>Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

</head> 

<body> 

<form action = 'testselectprocess.php' method='POST'> 

<div> 
<select id="cat"></select> <select id="items" disabled></select> 
</div> 

<script> 
$(document).ready(function(){ 

var c = '<option>Select</option>'; 
var cat1 = ["Honey", "Tree", "Chocolate"]; 
for (i=0; i < cat1.length; i++){ 
c += '<option>' + cat1[i] + '</options>'; 
} 
$('#cat') 
.html(c) 
.change(function(){ 
    var indx = this.selectedIndex - 1; 
    if (indx < 0) { 
    $('#items').empty().attr('disabled','disabled'); 
    return; 
    } 
    var item = '<option>Select an item</option>'; 
    for (i=0; i < cat1.length; i++){ 
    item += indx !== i ? '<option>' + cat1[i] + '</options>' : ''; 
    } 
    $('#items').html(item).removeAttr('disabled'); 
}); 

}); 

</script> 


</form> 

</body> 
</html>

来源

2017-05-01 16:18:51 Cuzi

选择另一个下拉值（Jquery）后删除下拉项目

回答

相关问题