Question

我有一个小JS函数，如果点击，我可以重复第一个select和input值。

它运作良好。

我现在遇到的唯一问题是，如果选择的option与第一次复制的select不同，则会{。}}。

案例：在顶部的第一个选择中选择'Spécialétudiant'，然后点击'重复整个住宿'链接。最后一个选择现在是空白的，而我希望它是“自定义价格”（找到的第一个值）。

我怎么能让它成为可能？

$('#repeatRate').on('click', function(e) {
    e.preventDefault();

    var price = $('select[name="BIL_RateId[]"] option:selected').first().val();
    var rate = $('input[name="BIL_Rate[]"]').first().val();

    $('select[name="BIL_RateId[]"]').val(price);

    if(price==0) {
        $('input[name="BIL_Rate[]"]').val(rate).prop('readonly', false);
    }
    else {
        $('input[name="BIL_Rate[]"]').val(rate).prop('readonly', true);
    }
});

Answer 1

您必须检查具有该值的option是否确实存在。下面的代码确实如此，虽然有点混乱：

＆＃13;

$('#repeatRate').on('click', function(e) {
  e.preventDefault();

  var price = $('select[name="BIL_RateId[]"] option:selected').first().val();
  var rate = $('input[name="BIL_Rate[]"]').first().val();

  $('select[name="BIL_RateId[]"]').each(function() {
    var $select = $(this);
    if ($select.find("option[value='" + price + "']").length > 0) {
      $select.val(price);
    } else {
      $select
      .val(0) // or whatever else you use as default value
      .parents('tr')
      .find('input')
      .focus();    
    }
  });

  if (price == 0) {
    $('input[name="BIL_Rate[]"]').val(rate).prop('readonly', false);
  } else {
    // this line is conflicting with manually setting the focus
    // $('input[name="BIL_Rate[]"]').val(rate).prop('readonly', true);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
  <tbody>
    <tr>
      <th width="60%">Date</th>
      <th width="40%">Price of the night $</th>
    </tr>

    <tr>
      <th>Samedi 15 Avril 2017
        <br>
        <select name="BIL_RateId[]" class="form-control">
          <option value="0" data-name="" data-description="" data-rate="" selected="">Custom price</option>
          <option value="3" data-name="Spécial étudiant" data-description="Spécial étudiant" data-rate="99.99">Spécial étudiant - $ 99.99</option>
        </select>
      </th>
      <td>
        <div class="form-group">
          <div class="col-sm-12">
            <input type="text" name="BIL_Rate[]" class="form-control" required="">
            <a href="#" id="repeatRate"><small>Repeat for the whole stay</small></a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <th>Dimanche 16 Avril 2017
        <br>
        <select name="BIL_RateId[]" class="form-control">
          <option value="0" data-name="" data-description="" data-rate="" selected="">Custom price</option>
          <option value="3" data-name="Spécial étudiant" data-description="Spécial étudiant" data-rate="99.99">Spécial étudiant - $ 99.99</option>
        </select>
      </th>
      <td>
        <div class="form-group">
          <div class="col-sm-12">
            <input type="text" name="BIL_Rate[]" class="form-control" required="">

          </div>
        </div>
      </td>
    </tr>

    <tr>
      <th>Lundi 17 Avril 2017
        <br>
        <select name="BIL_RateId[]" class="form-control">
          <option value="0" data-name="" data-description="" data-rate="" selected="">Custom price</option>
        </select>
      </th>
      <td>
        <div class="form-group">
          <div class="col-sm-12">
            <input type="text" name="BIL_Rate[]" class="form-control" required="">

          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

重复所选选项以选择异常

1 个答案: