使用第一个输入填充HTML select标签

Question

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

有没有一种方法可以用第一个输入的值填充表单中的每个输入？

在该小提琴的情况下https://jsfiddle.net/az8ujh1e/1/ ，在任何运行结束日期的第一输入端将填充其他的（仍可进行改性逐个）和一个第一输入端上的闭合日期在所有截止日期都将执行相同的操作。

码：

 <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

我认为其他答案都没有提到他的值应该仅在尚未设置其他值时才自动设置的意思。

将“ timeopen”和“ timeclosed”类添加到选择器中，如下所示：

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

然后，以下脚本仅在其他三个值仍设置为“ 00:00”的情况下才会对其进行更改。

$(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());
    }
  }
});

如果需要将其中三个设置为“ 00:00”，则可能会导致问题，因为这会将第四个设置为“ 00:00”。 因此，您可能希望使用全局变量而不是检查值，以便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

如果我正确理解，您想在同一类型的所有其他字段中的一个字段中显示您选择的值。 如果是这样，您只需要在选择的输入中添加一个“ open”或“ closed”类，然后像这样继续：

$('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

这是一个可以满足您需要的代码，但是目前还没有完全优化。 我要做的是，将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);
    }
});

编辑：就像在另一个答案中提到的那样，将class 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/