Question

我的表单中有三个列表，在加载表单时有相同的选项。

但我的要求是：只要用户选择第一个选项，就应该从第二个列表中删除它，并且当用户给出第二个选项时，应该从第三个列表中删除它。所以没有机会重复选择。

<html>
<head>
<script language="JavaScript">
function enable_text(status)
{
status=!status; 
    document.f1.other_text.disabled = status;
}
</script>
</head>
<body onload=enable_text(false);>

<form name=f1 method=post>
    <label>First Pref :  </label>
    <select name="Colors option 1">
    <option value="">Select 1st</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="B">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
    <option value="">Select 2nd</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="B">Yellow</option>
</select>
</br></br>
<label>Third Pref :  </label>
<select name="Colors option 3">
    <option value="">Select 3rd</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="B">Yellow</option>
</select>

Answer 1

这是选择框上的jQuery事件change，它将禁用其他选项中的选定选项，但不会选择其中一个。

var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);

之后将重新启动已禁用但未选中的选项。

- 我也选择了价值"Y" for yellow。

$(function(){
  $('select').on('change', function(){
      
      var selected = $(this).val();
      $('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
      
      // restart options that are disabled, but not selected anymore.
      var selectedElements = "";
      $('select option:selected').each(function(k,v){ 
          selectedElements += (selectedElements!=""?",":"")+ '[value="'+$(this).val()+'"]'; 
       });
      $('select option:disabled').not(selectedElements).prop('disabled', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<form name=f1 method=post>
    <label>First Pref :  </label>
    <select name="Colors option 1">
    <option value="">Select 1st</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="Y">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
    <option value="">Select 2nd</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="Y">Yellow</option>
</select>
</br></br>
<label>Third Pref :  </label>
<select name="Colors option 3">
    <option value="">Select 3rd</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="Y">Yellow</option>
</select>

Php：动态更改列表值而不加载页面

1 个答案: