Question

我需要调整我用于我为我所工作的学校创建的网站的一些代码，以禁止同时选择某些选项。

用户将看到以下HTML下拉列表6次：

<select type="select" name="optRes2" select id="optRes2">
    <option value="" disabled selected hidden>Please select an option...</option>
    <option value="Art">Art</option>
    <option value="Business Studies">Business Studies</option>
    <option value="Computing">Computing</option>
    <option value="Drama">Drama</option>
    <option value="French">French</option>
    <option value="Food Technology">Food Technology</option>
    <option value="Geography">Geography</option>
    <option value="German">German</option>
    <option value="History">History</option>
    <option value="Music">Music</option>
    <option value="Philosophy and Ethics">Philosophy and Ethics</option>
    <option value="Product Design">Product Design</option>
    <option value="Physical Education">Physical Education</option>
    <option value="Spanish">Spanish</option>
    <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
    <option value="Textiles">Textiles</option>
</select>

用户不应同时选择艺术品和纺织品。他们可以选择EITHER Art OR Textiles - 但不能同时选择两者。

例如：用户在opt1中选择“Art”，因此在剩余的5个菜单中禁用Textiles。如果用户返回并取消选择Art，则应始终启用Textiles。希望你明白我的意思。

我已经有了防止多次选择相同选项的代码：

$(function() {
    $('select').change(function(){
        if($(this).attr('id') == 'opt1' && $(this).val() == 'Default'){
            $('select').not(this).prop('disabled', true).val('Disabled');
        } else {
            $('select').not(this).removeProp('disabled');
            $('select option').removeProp('disabled');
            $('select').each(function() {
                var val = $(this).val();
                if(val != 'Default' || val != 'Disabled'){
                    $('select option[value="'+val+'"]').not(this).prop('disabled', true);
                }
            });
        }
    });
});

然后，用户单击“提交”，然后将所有内容提交给MySQL服务器以供日后查看。

菜单名为opt1，opt2，opt3，opt4，optRes1和optRes2。

谢谢大家，

杰克

Answer 1

尝试添加一个带有id选择的重叠div，然后选择每个选择并在更改时禁用所选的选项，如下所示：

<div id="selection">
            <select type="select" name="optRes2" select id="optRes2">
                <option value="" disabled selected hidden>Please select an option...                       </option>
                <option value="Art">Art</option>
                 etc
            </select>
    <select type="select" name="optRes3" select id="optRes3">
                <option value="" disabled selected hidden>Please select an option...                       </option>
                <option value="Art">Art</option>
                 etc
            </select>
    </div>

和脚本

<script type="text/JavaScript" language="JavaScript">
    $( "#optRes2" ).change(function() {
      $("div#selection select.select option").each(function(){
             if($(this).val()== $('#optRes2').val() ){ 
                $(this).attr("disabled","true");    
             }
       });
    });
    $( "#optRes3" ).change(function() {
      $("div#selection select.select option").each(function(){
             if($(this).val()== $('#optRes3').val() ){ 
                $(this).attr("disabled","true");    
             }
       });
    });
</script>

Answer 2

我使用名为notallowed的数据属性。在那里，您可以设置应禁用的值。当值发生变化时，我们还会检查我们之前是否禁用了某些字段并重新启用它们。

＆＃13;

$('select').change(function(){
    
    var notAllowed = $(this).find('option:selected').data('notallowed');
    var currentValue = $(this).val();
    // Get the previous selected value.
    var oldValue = $(this).data('old');
    
    // Keep track of the previous selected value.
    $(this).data('old', currentValue);
    
    // Re-enabled all that was disabled by the previous selection.
    if(oldValue) {
      // Re-enable the old value in the other selects.
      $('select').not(this).find('option[value="' + oldValue +'"]').prop('disabled', false);
      
      // Get the option.
      var previousNotAllowed = $(this).find('option[value="' + oldValue +'"]').data('notallowed');
      if(previousNotAllowed){
        $('select').not(this).find('option[value="' + previousNotAllowed +'"]').prop('disabled', false);
      }
    }
    
  // If we selected a option with notallowed attribute we should disable that option in the other selects.
    if(notAllowed){
      var items = $('select').not(this).find('option[value="' + notAllowed +'"]').prop('disabled',true);
    }
  
  // Disable the current value in other selects.  
  $('select').not(this).find('option[value="' + currentValue +'"]').prop('disabled', true);
    
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type="select" name="optRes1" select id="optRes1">
  <option value="" disabled selected hidden>Please select an option...</option>
  <option value="Art" data-notallowed="Textiles">Art</option>
  <option value="Business Studies">Business Studies</option>
  <option value="Computing" data-notallowed="Drama">Computing</option>
  <option value="Drama" data-notallowed="Computing">Drama</option>
  <option value="French">French</option>
  <option value="Food Technology">Food Technology</option>
  <option value="Geography">Geography</option>
  <option value="German">German</option>
  <option value="History">History</option>
  <option value="Music">Music</option>
  <option value="Philosophy and Ethics">Philosophy and Ethics</option>
  <option value="Product Design">Product Design</option>
  <option value="Physical Education">Physical Education</option>
  <option value="Spanish">Spanish</option>
  <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
  <option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
 
<select type="select" name="optRes2" select id="optRes2">
  <option value="" disabled selected hidden>Please select an option...</option>
  <option value="Art" data-notallowed="Textiles">Art</option>
  <option value="Business Studies">Business Studies</option>
  <option value="Computing" data-notallowed="Drama">Computing</option>
  <option value="Drama" data-notallowed="Computing">Drama</option>
  <option value="French">French</option>
  <option value="Food Technology">Food Technology</option>
  <option value="Geography">Geography</option>
  <option value="German">German</option>
  <option value="History">History</option>
  <option value="Music">Music</option>
  <option value="Philosophy and Ethics">Philosophy and Ethics</option>
  <option value="Product Design">Product Design</option>
  <option value="Physical Education">Physical Education</option>
  <option value="Spanish">Spanish</option>
  <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
  <option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
    <option value="" disabled selected hidden>Please select an option...</option>
  <option value="Art" data-notallowed="Textiles">Art</option>
  <option value="Business Studies">Business Studies</option>
  <option value="Computing" data-notallowed="Drama">Computing</option>
  <option value="Drama" data-notallowed="Computing">Drama</option>
  <option value="French">French</option>
  <option value="Food Technology">Food Technology</option>
  <option value="Geography">Geography</option>
  <option value="German">German</option>
  <option value="History">History</option>
  <option value="Music">Music</option>
  <option value="Philosophy and Ethics">Philosophy and Ethics</option>
  <option value="Product Design">Product Design</option>
  <option value="Physical Education">Physical Education</option>
  <option value="Spanish">Spanish</option>
  <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
  <option value="Textiles" data-notallowed="Art">Textiles</option>
</select>

＆＃13;

Answer 3

更好地创建选项数组，并使用数据，而不是使用HTML。使用这种方法，您将能够保持干爽。

认为解决方案很明确。

create table rd(r1 number,r2 number, primary key (r1,r2));

选择选项1时禁用选项2

3 个答案: