如何在HTML的“数据列表”中设置“选定”？

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 />