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

【问题标题】：Populate HTML select Tag with first input使用第一个输入填充 HTML 选择标记
【发布时间】：2016-02-29 14:29:13
【问题描述】：

填写工作时间表单的每一项输入可能相当乏味。

有没有办法用第一个输入的值填充表单中的每个输入？

在这个 Fiddle 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>

【问题讨论】：

对不起，无法满足您的需求，最好添加您尝试过的 js 或 jQuery 代码。

标签： javascript jquery html

【解决方案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());
    }
  }
});

【讨论】：

非常感谢，这正是我所期望的工作方式！

【解决方案2】：

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

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

这是您的 Fiddle 更新： https://jsfiddle.net/az8ujh1e/2/

【讨论】：

【解决方案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);
    }
});

编辑：正如有人在另一个答案中提到的那样，将类 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/

【讨论】：

谢谢，它已经很好用了。这可能很复杂，但我想象的是第一个输入可以是 4 个输入中的任何一个（timeopen1 或 2 或 3 或 4）。这意味着输入只会修改一次其他选定的标签。只有当页面被刷新时，第一个输入才能改变。
这很容易做到，但由于 HTML 的结构，代码会很复杂。稍后将通过一个示例编辑我的答案。
感谢您的帮助，我已接受@TonyHinkle 的回答。