如何在HTML的Datalist中设置Selected？

Question

看看下面的片段：-

$('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>，以便数据列表选项可以有预选选项。

虽然运行修改了脚本，但提交按钮未启用。为什么以及如何解决？

Answer 1

您可以在最后触发一个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 />

如何在HTML的Datalist中设置Selected？

How to set Selected in Datalist in HTML?

html

javascript

jquery

html-datalist