Question

我有一个div列表，每个div都包含一个选择列表和一个文本框。如果用户选择＆＃34;监视＆＃34;还有一个隐藏的div替换单个文本框。从列表中。

现在，选择一个将改变所有3行。我需要更改，只需更改选择列表旁边的那个。

HTML：

<div class="container body-content">

    <div class="form-group col-md-3">
      <div>
        <select class="form-control accessoryList" id="SelectedAccessory" name="SelectedAccessory"><option selected="selected" value="1">Keyboard</option>
          <option value="2">Mouse</option>
          <option value="3">iPad Case</option>
        </select>
      </div>
    </div>

    <div class="form-group col-md-8">
      <div class="accessory-url">
        <input class="form-control text-box single-line" id="ProductLink" name="ProductLink" placeholder="Enter link to web page" type="text" value="" />
        <span class="field-validation-valid text-danger" data-valmsg-for="RequestedAccessory.ProductLink" data-valmsg-replace="true"></span>
      </div>
      <div class="monitor-details" style="display: none;">
        <div class="form-group col-md-6">
          <select class="form-control" data-val="true" data-val-number="The field MonitorSizeId must be a number." id="RequestedAccessory_MonitorSizeId" name="RequestedAccessory.MonitorSizeId"><option value="">Select Monitor Size</option>
            <option>20</option>
            <option>22</option>
          </select>
        </div>
      <div class="form-group col-md-3">
        <input class="form-control" data-val="true" data-val-number="The field Quantity must be a number." id="RequestedAccessory_Quantity" name="RequestedAccessory.Quantity" placeholder="Number of monitors" type="text" value="" />
      </div>
    </div>

    <div class="col-md-1">
      <button type="button" id="deleteItem" class="btn btn-danger">
        <span class="glyphicon glyphicon-remove"></span>
      </button>
    </div>

  </div>

</div>

  <div id="form-body">
  <div class="row">

    <div class="form-group col-md-3">
      <div>
        <select class="form-control accessoryList" id="SelectedAccessory" name="SelectedAccessory"><option selected="selected" value="1">Keyboard</option>
          <option value="2">Mouse</option>
          <option value="3">iPad Case</option>
        </select>
      </div>
    </div>

    <div class="form-group col-md-8">
      <div class="accessory-url">
        <input class="form-control text-box single-line" id="ProductLink" name="ProductLink" placeholder="Enter link to web page" type="text" value="" />
        <span class="field-validation-valid text-danger" data-valmsg-for="RequestedAccessory.ProductLink" data-valmsg-replace="true"></span>
      </div>
      <div class="monitor-details" style="display: none;">
        <div class="form-group col-md-6">
          <select class="form-control" data-val="true" data-val-number="The field MonitorSizeId must be a number." id="RequestedAccessory_MonitorSizeId" name="RequestedAccessory.MonitorSizeId"><option value="">Select Monitor Size</option>
            <option>20</option>
            <option>22</option>
          </select>
        </div>
      <div class="form-group col-md-3">
        <input class="form-control" data-val="true" data-val-number="The field Quantity must be a number." id="RequestedAccessory_Quantity" name="RequestedAccessory.Quantity" placeholder="Number of monitors" type="text" value="" />
      </div>
    </div>

    <div class="col-md-1">
      <button type="button" id="deleteItem" class="btn btn-danger">
        <span class="glyphicon glyphicon-remove"></span>
      </button>
    </div>

  </div>

</div>


<div id="form-body">
  <div class="row">

    <div class="form-group col-md-3">
      <div>
        <select class="form-control accessoryList" id="SelectedAccessory" name="SelectedAccessory"><option selected="selected" value="1">Keyboard</option>
          <option value="2">Mouse</option>
          <option value="3">iPad Case</option>
        </select>
      </div>
    </div>

    <div class="form-group col-md-8">
      <div class="accessory-url">
        <input class="form-control text-box single-line" id="ProductLink" name="ProductLink" placeholder="Enter link to web page" type="text" value="" />
        <span class="field-validation-valid text-danger" data-valmsg-for="RequestedAccessory.ProductLink" data-valmsg-replace="true"></span>
      </div>
      <div class="monitor-details" style="display: none;">
        <div class="form-group col-md-6">
          <select class="form-control" data-val="true" data-val-number="The field MonitorSizeId must be a number." id="RequestedAccessory_MonitorSizeId" name="RequestedAccessory.MonitorSizeId"><option value="">Select Monitor Size</option>
            <option>20</option>
            <option>22</option>
          </select>
        </div>
      <div class="form-group col-md-3">
        <input class="form-control" data-val="true" data-val-number="The field Quantity must be a number." id="RequestedAccessory_Quantity" name="RequestedAccessory.Quantity" placeholder="Number of monitors" type="text" value="" />
      </div>
    </div>

    <div class="col-md-1">
      <button type="button" id="deleteItem" class="btn btn-danger">
        <span class="glyphicon glyphicon-remove"></span>
      </button>
    </div>

  </div>

</div>
<div class="row">
  <div class="col-md-6">
    <a href="javascript:void(0);" id="add-item"class="btn btn-primary">Add Another Item</a>
  </div>
  <div class="col-md-6">
    <input type="submit" value="Select Software" class="btn btn-default pull-right" />
  </div>
</div>
</div>

jquery的：

  $(document).on("change", ".accessoryList", function () {

      $("option:selected", this).each(function (i, e) {

          var selected = $(e).val();

          if (selected === "3") {
              $(".accessory-url").hide();
              $(".monitor-details").show();
          }
          else {
              $(".accessory-url").show();
              $(".monitor-details").hide();
          }
      })
  });

Answer 1

你这样做是错误的。您需要使用上下文this将其限制在项目中。同时不重复 id。它永远不会奏效。

$(document).on("change", ".accessoryList", function() {

  // Change `id="form-body"` to `class="form-body"`.
  $this = $(this).closest(".form-body");

  var selected = $(this).val();
  if (selected === "3") {
    $this.find(".accessory-url").hide();
    $this.find(".monitor-details").show();
  } else {
    $this.find(".accessory-url").show();
    $this.find(".monitor-details").hide();
  }
});

注意： 您还没有正确关闭代码，所以我在小提琴中使用了黑客。

工作小提琴：https://jsfiddle.net/9ocehauq/

jQuery .change影响所有元素而不仅仅是选中

1 个答案: