2017-05-01 6 views
0

ItemXが選択されている場合、ドロップダウンメニュー(ドロップダウン2)から項目(ItemX)を削除します。Drop Down 1 Jqueryを使用します。別のドロップダウン値(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> 

上記のコードには2つのドロップダウンがあります。両方とも3つの値を有する。Honey,Tree,Chocolate。ユーザーがHoneyを最初のドロップダウンから選択した場合は、Honeyを非表示にするか、2番目のドロップダウンから削除する必要があります。

+0

少し例、役に立つかもしれ https://jsfiddle.net/o2gxgz9r/6488/ – Nitesh

答えて

0

あなたは、任意のチェックをしないと、あなただけの二番目の第1の選択からすべての項目をコピーし、選択した値を追加しません。

だから、解決策は、選択した項目をコピーして検証しないことです、このように: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> 
関連する問題