禁用selectlsit项目不按预期工作

Question

我的“选择”列表存在问题。我有三个，他们都有相同的价值观。如果在其中一个列表中选择了一个值，则在其他两个选择列表中禁用它。但是，当我选择星期一=“Måndag”时，它会禁用星期一和最后四项。我从所有选择列表中获得相同的行为。我做错了什么？

$("#Förstahandsval").focusin(function() {
    $(this).data('val', $(this).val());
  })
  .change(function() {
    var newValue = this.value;
    var prevValue = $(this).data('val');

    //Gör vald tid ovalbar i de andra dropdown
    $("#Andrahandsval option[value*=" + newValue + "]").prop('disabled', true);
    $("#Tredjehandsval option[value*=" + newValue + "]").prop('disabled', true);
    //Av selecterar förra valet i de andra dropdowns
    $("#Andrahandsval option[value*=" + prevValue + "]").prop('disabled', false);
    $("#Tredjehandsval option[value*=" + prevValue + "]").prop('disabled', false);

  });
//-----------------------------------------------------
$("#Andrahandsval").focusin(function() {
    $(this).data('val', $(this).val());
  })
  .change(function() {
    var newValue = this.value;
    var prevValue = $(this).data('val');

    //Gör vald tid ovalbar i de andra dropdown
    $("#Förstahandsval option[value*=" + newValue + "]").prop('disabled', true);
    $("#Tredjehandsval option[value*=" + newValue + "]").prop('disabled', true);;
    //Av selecterar förra valet i de andra dropdowns
    $("#Förstahandsval option[value*=" + prevValue + "]").prop('disabled', false);
    $("#Tredjehandsval option[value*=" + prevValue + "]").prop('disabled', false);

  });
//--------------------------------------------------------------------------

$("#Tredjehandsval").focusin(function() {
    $(this).data('val', $(this).val());
  })
  .change(function() {
    var newValue = this.value;
    var prevValue = $(this).data('val');

    //Gör vald tid ovalbar i de andra dropdown
    $("#Andrahandsval option[value*=" + newValue + "]").prop('disabled', true);
    $("#Förstahandsval option[value*=" + newValue + "]").prop('disabled', true);
    //Av selecterar förra valet i de andra dropdowns
    $("#Andrahandsval option[value*=" + prevValue + "]").prop('disabled', false);
    $("#Förstahandsval option[value*=" + prevValue + "]").prop('disabled', false);

  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="FörstahandsvalHidden" type="text" name="Förstahandsval" value="" hidden />
<div class="form-group">
  <label for="Förstahandsval">Förstahandsval:</label>
  <i class="fa fa-info-circle" aria-hidden="true"></i>
  <select class="form-control" id="Förstahandsval">
                                            <option value="0">Förstahandsval</option>
                                            <option value="1">Måndag - 19:15-20:15</option>
                                            <option value="2">Måndag - 20:15-21:15</option>
                                            <option value="3">Tisdag - 19:15-20:15</option>
                                            <option value="4">Tisdag - 20:15-21:15</option>
                                            <option value="5">Onsdag - 19:15-20:15</option>
                                            <option value="6">Onsdag - 20:15-21:15</option>
                                            <option value="7">Torsdag - 19:15-20:15</option>
                                            <option value="8">Torsdag - 20:15-21:15</option>
                                            <option value="9">Fredag - 19:15-20:15</option>
                                            <option value="10">Fredag - 20:15-21:15</option>
                                            <option value="11">Lördag - 10:00-11:00</option>
                                            <option value="12">Lördag - 11:00-12:00</option>
                                            <option value="13">Söndag - 10:00-11:00</option>
                                            <option value="14">Söndag - 11:00-12:00</option>
                                        </select>
</div>

<!-- Val2 -->
<input id="AndrahandsvalHidden" type="text" name="Andrahandsval" value="" hidden />
<div class="form-group">
  <label for="Andrahandsval">Andrahandsval:</label>
  <i class="fa fa-info-circle" aria-hidden="true"></i>

  <select class="form-control" id="Andrahandsval">
                                            <option value="0">Andrahandsval</option>
                                            <option value="1">Måndag - 19:15-20:15</option>
                                            <option value="2">Måndag - 20:15-21:15</option>
                                            <option value="3">Tisdag - 19:15-20:15</option>
                                            <option value="4">Tisdag - 20:15-21:15</option>
                                            <option value="5">Onsdag - 19:15-20:15</option>
                                            <option value="6">Onsdag - 20:15-21:15</option>
                                            <option value="7">Torsdag - 19:15-20:15</option>
                                            <option value="8">Torsdag - 20:15-21:15</option>
                                            <option value="9">Fredag - 19:15-20:15</option>
                                            <option value="10">Fredag - 20:15-21:15</option>
                                            <option value="11">Lördag - 10:00-11:00</option>
                                            <option value="12">Lördag - 11:00-12:00</option>
                                            <option value="13">Söndag - 10:00-11:00</option>
                                            <option value="14">Söndag - 11:00-12:00</option>>
                                        </select>
</div>

<!-- Val3 -->
<input id="TredjehandsvalHidden" type="text" name="Tredjehandsval" value="" hidden />
<div class="form-group">
  <label for="Tredjehandsval">Förstahandsval:</label>
  <i class="fa fa-info-circle" aria-hidden="true"></i>
  <select class="form-control" id="Tredjehandsval">
                                            <option value="0">Tredjehandval</option>
                                            <option value="1">Måndag - 19:15-20:15</option>
                                            <option value="2">Måndag - 20:15-21:15</option>
                                            <option value="3">Tisdag - 19:15-20:15</option>
                                            <option value="4">Tisdag - 20:15-21:15</option>
                                            <option value="5">Onsdag - 19:15-20:15</option>
                                            <option value="6">Onsdag - 20:15-21:15</option>
                                            <option value="7">Torsdag - 19:15-20:15</option>
                                            <option value="8">Torsdag - 20:15-21:15</option>
                                            <option value="9">Fredag - 19:15-20:15</option>
                                            <option value="10">Fredag - 20:15-21:15</option>
                                            <option value="11">Lördag - 10:00-11:00</option>
                                            <option value="12">Lördag - 11:00-12:00</option>
                                            <option value="13">Söndag - 10:00-11:00</option>
                                            <option value="14">Söndag - 11:00-12:00</option>
                                        </select>
</div>

Answer 1

检查值时删除maximum' :: [Int] -> Int maximum' [x] = x maximum' (x:xs) | (maximum' xs) > x = maximum' xs | otherwise = x 符号。此*必须为option[value=*" + newValue + "]。设置星号会使option[value=" + newValue + "]代替contains。

equals

$("#Förstahandsval").focusin(function() {
    $(this).data('val', $(this).val());
  })
  .change(function() {
    var newValue = this.value;
    var prevValue = $(this).data('val');

    //Gör vald tid ovalbar i de andra dropdown
    $("#Andrahandsval option[value=" + newValue + "]").prop('disabled', true);
    $("#Tredjehandsval option[value=" + newValue + "]").prop('disabled', true);
    //Av selecterar förra valet i de andra dropdowns
    $("#Andrahandsval option[value=" + prevValue + "]").prop('disabled', false);
    $("#Tredjehandsval option[value=" + prevValue + "]").prop('disabled', false);

  });
//-----------------------------------------------------
$("#Andrahandsval").focusin(function() {
    $(this).data('val', $(this).val());
  })
  .change(function() {
    var newValue = this.value;
    var prevValue = $(this).data('val');

    //Gör vald tid ovalbar i de andra dropdown
    $("#Förstahandsval option[value=" + newValue + "]").prop('disabled', true);
    $("#Tredjehandsval option[value=" + newValue + "]").prop('disabled', true);;
    //Av selecterar förra valet i de andra dropdowns
    $("#Förstahandsval option[value=" + prevValue + "]").prop('disabled', false);
    $("#Tredjehandsval option[value=" + prevValue + "]").prop('disabled', false);

  });
//--------------------------------------------------------------------------

$("#Tredjehandsval").focusin(function() {
    $(this).data('val', $(this).val());
  })
  .change(function() {
    var newValue = this.value;
    var prevValue = $(this).data('val');

    //Gör vald tid ovalbar i de andra dropdown
    $("#Andrahandsval option[value=" + newValue + "]").prop('disabled', true);
    $("#Förstahandsval option[value=" + newValue + "]").prop('disabled', true);
    //Av selecterar förra valet i de andra dropdowns
    $("#Andrahandsval option[value=" + prevValue + "]").prop('disabled', false);
    $("#Förstahandsval option[value=" + prevValue + "]").prop('disabled', false);

  });

Answer 2

您只需使用以下代码即可实现：

$("select").on('change', function(){
    $('select option').removeAttr('disabled');
    $('select').not($(this)).find('[value='+$(this).val()+']').prop('disabled','disabled');
});

注意：

• 当您从选择列表中选择任何新选项时，第一行会从所有选项中删除已禁用的标记。

• 第二行禁用除活动选项之外的其他选项中的选项。 希望这会有所帮助。

$("select").on('change', function(){
  $('select option').removeAttr('disabled');
  $('select').not($(this)).find('[value='+$(this).val()+']').prop('disabled','disabled')
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="FörstahandsvalHidden" type="text" name="Förstahandsval" value="" hidden />
<div class="form-group">
<label for="Förstahandsval">Förstahandsval:</label>
<i class="fa fa-info-circle" aria-hidden="true"></i>
<select class="form-control" id="Förstahandsval">
  <option value="0">Förstahandsval</option>
  <option value="1">Måndag - 19:15-20:15</option>
  <option value="2">Måndag - 20:15-21:15</option>
  <option value="3">Tisdag - 19:15-20:15</option>
  <option value="4">Tisdag - 20:15-21:15</option>
  <option value="5">Onsdag - 19:15-20:15</option>
  <option value="6">Onsdag - 20:15-21:15</option>
  <option value="7">Torsdag - 19:15-20:15</option>
  <option value="8">Torsdag - 20:15-21:15</option>
  <option value="9">Fredag - 19:15-20:15</option>
  <option value="10">Fredag - 20:15-21:15</option>
  <option value="11">Lördag - 10:00-11:00</option>
  <option value="12">Lördag - 11:00-12:00</option>
  <option value="13">Söndag - 10:00-11:00</option>
  <option value="14">Söndag - 11:00-12:00</option>
</select>
</div>

<!-- Val2 -->
<input id="AndrahandsvalHidden" type="text" name="Andrahandsval" value="" hidden />
<div class="form-group">
<label for="Andrahandsval">Andrahandsval:</label>
<i class="fa fa-info-circle" aria-hidden="true"></i>

<select class="form-control" id="Andrahandsval">
  <option value="0">Andrahandsval</option>
  <option value="1">Måndag - 19:15-20:15</option>
  <option value="2">Måndag - 20:15-21:15</option>
  <option value="3">Tisdag - 19:15-20:15</option>
  <option value="4">Tisdag - 20:15-21:15</option>
  <option value="5">Onsdag - 19:15-20:15</option>
  <option value="6">Onsdag - 20:15-21:15</option>
  <option value="7">Torsdag - 19:15-20:15</option>
  <option value="8">Torsdag - 20:15-21:15</option>
  <option value="9">Fredag - 19:15-20:15</option>
  <option value="10">Fredag - 20:15-21:15</option>
  <option value="11">Lördag - 10:00-11:00</option>
  <option value="12">Lördag - 11:00-12:00</option>
  <option value="13">Söndag - 10:00-11:00</option>
  <option value="14">Söndag - 11:00-12:00</option>>
</select>
</div>

<!-- Val3 -->
<input id="TredjehandsvalHidden" type="text" name="Tredjehandsval" value="" hidden />
<div class="form-group">
<label for="Tredjehandsval">Förstahandsval:</label>
<i class="fa fa-info-circle" aria-hidden="true"></i>
<select class="form-control" id="Tredjehandsval">
  <option value="0">Tredjehandval</option>
  <option value="1">Måndag - 19:15-20:15</option>
  <option value="2">Måndag - 20:15-21:15</option>
  <option value="3">Tisdag - 19:15-20:15</option>
  <option value="4">Tisdag - 20:15-21:15</option>
  <option value="5">Onsdag - 19:15-20:15</option>
  <option value="6">Onsdag - 20:15-21:15</option>
  <option value="7">Torsdag - 19:15-20:15</option>
  <option value="8">Torsdag - 20:15-21:15</option>
  <option value="9">Fredag - 19:15-20:15</option>
  <option value="10">Fredag - 20:15-21:15</option>
  <option value="11">Lördag - 10:00-11:00</option>
  <option value="12">Lördag - 11:00-12:00</option>
  <option value="13">Söndag - 10:00-11:00</option>
  <option value="14">Söndag - 11:00-12:00</option>
</select>
</div>