選擇另一個下拉值（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）後刪除下拉項目

回答

相關問題