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的“数据列表”中设置“选定”？

1 个答案: