Question

我想使用Jquery在ItemX中选择Drop Down 1时从下拉菜单（下拉2）中删除项目（ItemX）。

我正在以某种方式工作;

<?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应该不可见或从第二个下拉列表中删除。

Answer 1

您不进行任何检查，并且未添加所选值，只需将第一个选项中的所有项目复制到第二个选项。

因此解决方案是验证而不是复制所选项目，如下所示：

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

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

1 个答案: