Как установить Selected в Datalist в HTML? - PullRequest
Новая
       22

Как установить Selected в Datalist в HTML?

0 голосов
/ 19 декабря 2018

Посмотрите на приведенный ниже фрагмент: - 

$('input[list]').on('input', function(e) {
  var $input = $(e.target),
    $options = $('#' + $input.attr('list') + ' option'),
    $hiddenInput = $('#' + $input.attr('id') + '-hidden'),
    label = $input.val();

  $hiddenInput.val(label);

  for (var i = 0; i < $options.length; i++) {
    var $option = $options.eq(i);

    if ($option.text() === label) {
      $hiddenInput.val($option.attr('data-value'));
      break;
    }
  }
});

var validValues = [0, 1, 2];
$("#m_cat_id").on("change keyup input", function() {
  var validValueSelected = validValues.some(x => x == $('#m_cat_id-hidden').val());
  if (!validValueSelected) {
    document.getElementById("submitButton").disabled = true
  };
  if (validValueSelected) {
    document.getElementById("submitButton").disabled = false
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="Trial 1" data-value="1" list="m_cat" id="m_cat_id" class="form-control" required>
<datalist id="m_cat">
        <option data-value="0">None (Parent)</option>
					<option data-value="1">Trial 1</option>
						<option data-value="2">Trial 2</option>
			    </datalist>
<input type="hidden" name="under" id="m_cat_id-hidden" value="">
<button class="btn btn-large btn-primary" type="submit" name="btn-submit" id="submitButton" disabled>Submit</button><br />

Функция вышеприведенного кода состоит в том, что если пользователь выбирает допустимую опцию из списка данных, тогда кнопка отправки активна, в противном случае она отключена ...

Теперь я изменил <input list="m_cat" id="m_cat_id" class="form-control" required> на <input value="Trial 1" data-value="1" list="m_cat" id="m_cat_id" class="form-control" required>, чтобы опция списка данных могла иметь предварительно выбранную опцию.

Во время работы измененного скрипта кнопка отправки не активна.Почему и как это решить?

1 Ответ

0 голосов
/ 19 декабря 2018

Вы можете инициировать событие keyup в конце, чтобы блок кода проверки выполнялся. 

$('input[list]').on('input', function(e) {
  var $input = $(e.target),
    $options = $('#' + $input.attr('list') + ' option'),
    $hiddenInput = $('#' + $input.attr('id') + '-hidden'),
    label = $input.val();

  $hiddenInput.val(label);

  for (var i = 0; i < $options.length; i++) {
    var $option = $options.eq(i);

    if ($option.text() === label) {
      $hiddenInput.val($option.attr('data-value'));
      break;
    }
  }
});

var validValues = [0, 1, 2];
$("#m_cat_id").on("change keyup input", function() {
  var validValueSelected = validValues.some(x => x == $('#m_cat_id-hidden').val());
  if (!validValueSelected) {
    document.getElementById("submitButton").disabled = true
  };
  if (validValueSelected) {
    document.getElementById("submitButton").disabled = false
  };
});
$("#m_cat_id").keyup();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="Trial 1" data-value="1" list="m_cat" id="m_cat_id" class="form-control" required>
<datalist id="m_cat">
        <option data-value="0">None (Parent)</option>
					<option data-value="1">Trial 1</option>
						<option data-value="2">Trial 2</option>
			    </datalist>
<input type="hidden" name="under" id="m_cat_id-hidden" value="">
<button class="btn btn-large btn-primary" type="submit" name="btn-submit" id="submitButton" disabled>Submit</button><br />
...