使用第一个输入填充HTML选择标记

Question

填写工作时间的每个输入可能非常繁琐。

是否可以使用第一个输入的值填充表单中的每个输入？

在这个小提琴https://jsfiddle.net/az8ujh1e/1/的情况下，任何 opend 日期的第一个输入将填充其他的（仍然可以逐个修改） 并且已关闭日期的第一个输入将在所有结束日期执行相同的操作。

代码：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="col-sm-6">Opend</div>
<div class="col-sm-6">Closed</div>

<form role="form" action="#" method="POST"> 

      <div class="col-sm-6" id="timeopen1">
      <select  name="timeopen1" class='selectpicker' >
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="04:00">05:00</option>
      <option value="04:00">06:00</option>
      </select>
      </div>

      <div class="col-sm-6" id="timeclosed1">
      <select  name="timeclosed1" class='selectpicker' >
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="04:00">05:00</option>
      <option value="04:00">06:00</option>
      </select>
      </div>

      <div class="col-sm-6" id="timeopen2">
      <select  name="timeopen2" class='selectpicker' >
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="04:00">05:00</option>
      <option value="04:00">06:00</option>
      </select>
      </div>

      <div class="col-sm-6" id="timeclosed2">
      <select  name="timeclosed2" class='selectpicker' >
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="04:00">05:00</option>
      <option value="04:00">06:00</option>
      </select>
      </div>
      
      
      <div class="col-sm-6" id="timeopen3">
      <select  name="timeopen3" class='selectpicker' >
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="04:00">05:00</option>
      <option value="04:00">06:00</option>
      </select>
      </div>

      <div class="col-sm-6" id="timeclosed3">
      <select  name="timeclosed3" class='selectpicker' >
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="04:00">05:00</option>
      <option value="04:00">06:00</option>
      </select>
      </div>
        
      <div class="col-sm-6" id="timeopen4">
      <select  name="timeopen4" class='selectpicker' >
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="04:00">05:00</option>
      <option value="04:00">06:00</option>
      </select>
      </div>

      <div class="col-sm-6" id="timeclosed4">
      <select  name="timeclosed4" class='selectpicker' >
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="04:00">05:00</option>
      <option value="04:00">06:00</option>
      </select>
      </div>
      <div class="col-sm-6"><br>
        <button type="submit" class="btn btn-default" name="submit_time" >Submit</button>
      </div>
</form>

Answer 1

我认为其他答案缺少的是，如果尚未设置其他值，则只应自动设置值。

添加＆＃34; timeopen＆＃34;和＆＃34;时间关闭＆＃34;选择器的类如下：

<select name="timeopen1" class='selectpicker timeopen'>

然后，以下脚本只有在仍然设置为＆＃34; 00：00＆＃34;时才会更改其他三个值。

$(function() {
  $(".timeclosed, .timeopen").change(function() {
    if ($(this).hasClass("timeopen")) {
      autoSet(".timeopen", this);
    } else {
      autoSet(".timeclosed", this);
    }
  });

  function autoSet(classSelector, t) {
    if ($(classSelector + " option[value='00:00']:selected").length == 3) {
      $(classSelector).val($(t).val());
    }
  }
});

如果需要将其中三个设置为＆＃34; 00：00＆＃34;这可能会导致问题，因为它会将第四个更改为＆＃34; 00：00＆＃34;同样。因此，您可能希望使用全局变量而不是检查值，以便autoSet仅针对.timeopen运行一次，而针对.timeclosed运行一次。

$(function() {
  var autoSetTimeopen = true;
  var autoSetTimeclosed = true;

  $(".timeclosed, .timeopen").change(function() {
    if ($(this).hasClass("timeopen") && autoSetTimeopen) {
      autoSet(".timeopen", this);
      autoSetTimeopen = false;
    } else if ($(this).hasClass("timeclosed") && autoSetTimeclosed) {
      autoSet(".timeclosed", this);
      autoSetTimeclosed = false;
    }
  });

  function autoSet(classSelector, t) {
    if ($(classSelector + " option[value='00:00']:selected").length == 3) {
      $(classSelector).val($(t).val());
    }
  }
});

Answer 2

如果我正确理解您想要在同一类型的所有其他字段中的一个字段中显示您选择的值。如果是这样，你只需要添加一个类＆＃34;打开＆＃34;或者＆＃34;关闭＆＃34;选择输入，然后按以下步骤操作：

$('select').on('change', function() {
    var value = $(this).val();
  var className = 'open';
  if( $(this).hasClass('closed') ) {
    className = 'closed';
  }
  $('select.' + className).val(value);
});

这是你的小提琴更新： https://jsfiddle.net/az8ujh1e/2/

Answer 3

这是一个可以做你想要的代码，但现在还没有完全优化。我要做的是，在select标签中添加id，这样你就可以使用javascript或jquery轻松地使用它们。

$('#timeopen1 select').change(function(){
    var opt = $(this).val()
    for(i = 2; i<=4; i++){
       $('#timeopen'+i.toString()+' select').val(opt);
    }
});
$('#timeclosed1 select').change(function(){
    var opt = $(this).val()
    for(i = 2; i<=4; i++){
       $('#timeclosed'+i.toString()+' select').val(opt);
    }
});

编辑： 正如在另一个答案中提到的那样，将类timeopen和timeclosed添加到您的select元素中，以便我们可以轻松地使用它们。这是更新的代码，只是第一次设置所有元素。

$('.selectpicker').one('change',function(event){
    var opt = $(this).val()
      if($(this).hasClass('timeopen'))
    {
        $('.timeopen').each(function(){
        $(this).val(opt);
        $(this).off('change');
      });
    }
        else
    {
        $('.timeclosed').each(function(){
        $(this).val(opt);
        $(this).off('change');
      });
    }
});

https://jsfiddle.net/az8ujh1e/13/