javascript - 禁用 selectlsit 项目未按预期工作

Question

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

$("#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

检查值时删除 * 符号。此 option[value=*"+ newValue + "] 需要为 option[value="+ newValue + "]。放置一个星号使其包含而不是等于。

$("#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>