使用jQuery自动选择

时间:2019-04-24 22:33:26

标签: jquery

HTML代码:

        <div class="per-input per-businessHour">
                    <select name="closing_time[]" class="closing_time close_time" id="closing_time1">
                      <option value="">Choose</option>
                      @if ($range = range(strtotime('00:00'),strtotime('23:59'),15*60))
                        @foreach ($range as $time)
                          <option value="{{ date('h:i A',$time) }}">{{ date('h:i A',$time) }}</option>
                        @endforeach
                      @endif
                    </select>
                    <span value="1" class="editTime">Edit</span>
                  </div>
        <div class="per-input per-businessHour">
                    <select name="closing_time[]" class="closing_time close_time" id="closing_time2">
                      <option value="">Choose</option>
                      @if ($range = range(strtotime('00:00'),strtotime('23:59'),15*60))
                        @foreach ($range as $time)
                          <option value="{{ date('h:i A',$time) }}">{{ date('h:i A',$time) }}</option>
                        @endforeach
                      @endif
                    </select>
                    <span value="2" class="editTime">Edit</span>
                  </div>
        <div class="per-input per-businessHour">
                    <select name="closing_time[]" class="closing_time close_time" id="closing_time3">
                      <option value="">Choose</option>
                      @if ($range = range(strtotime('00:00'),strtotime('23:59'),15*60))
                        @foreach ($range as $time)
                          <option value="{{ date('h:i A',$time) }}">{{ date('h:i A',$time) }}</option>
                        @endforeach
                      @endif
                    </select>
                    <span value="3" class="editTime">Edit</span>
                  </div>

jQuery代码:


    $('.closing_time').on('change', function () {
      for (var i = 1; i <= 3; i++) {
        $('#closing_time'+i).find('option[value="'+this.value+'"]').attr("selected",true);
      }
    })

    $('.editTime').on('click', function () {
      var id = $(this).attr('value');
      $('#closing_time'+id).removeClass('close_time');
      $('#closing_time'+id).removeClass('closing_time');
      $('#closing_time'+id).addClass('editclose_time');
      $('#closing_time'+id).removeAttr('id');
      $('#closing_time'+id).find('option[value=""]').attr("selected",false);
    })
    $('.editclose_time').on('change', function () {
      $('.editclose_time').find('option[value="'+this.value+'"]').attr("selected",true);
    })

我正在尝试这样: 如果我选择所有选择值之一,则所有选择选项值将被选择为相同。在特殊情况下,如果我尝试编辑特定的选择选项,则只想更改此选择值和选定的选项即可。但是这样做失败...它更改了所有选择值和选择的选项。如果有人在这方面帮助我,请

1 个答案:

答案 0 :(得分:0)

这应该有效:

$(".per-businessHour").on("change", ".closing_time", function() {
    $(".closing_time").val(this.value);
});

这使用事件委托,因此动态更改类会更改事件处理程序是否运行。当您单击“编辑”按钮时,它将删除closing_time类,因此从中选择该代码将不会运行。它还使用该类来查找要更新的其他选择。