使用第一個輸入填充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/