Привет, у меня есть выпадающий список, который извлекает данные из базы данных. Забудьте о базе данных, у меня есть текстовое поле перед выпадающим меню. Логика заключается в том, что если я набираю текст, значение должно выбираться автоматически из раскрывающегося списка, если значение, введенное в тексте, не соответствует значениям в раскрывающемся списке, тогда пользователь может выбрать раскрывающийся список. Любая помощь приветствуется.
Вот мой html-код!
<div class="form-group"> <label class="col-sm-4 control-label">Scheme**</label> <div class="col-sm-4"> <select class="form-control" name="scheme" id="scheme"> <?php for ($column = 'A'; $column <= $lastcol; $column++) { echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>'; } ?> </select> </div> <div class="col-sm-4"> <input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here"> </div> </div> В раскрывающемся списке im, получающем эти значения
QC code Analyte Assay Value Assigned Value STANDARDDEVIATION ACCEPTABLEMIN ACCEPTABLEMAX Sample ID Date
<label for="">Enter Value</label> <input type="text" class="textVal"> <select name="" id="listItems"> </select> var listItems = ["One","Two","Three","Four","Five","Six"]; for (var i = 0; i < listItems.length; i++) { console.log(listItems[i]); $("#listItems").append("<option>" + listItems[i] + "</option>") } $(".textVal").on("focusout",function(){ for (var i = 0; i < listItems.length; i++) { console.log(listItems[i]); if(listItems[i] == $(this).val()) { $("#listItems").val($(this).val()); } } })
Попробуйте этот код, затем вы можете изменить его с помощью своих потребностей.
$("#product").on("change keyup paste", function(){ var valuefound =''; $("#platformid option").each(function(i){ if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } }); $('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })
Рабочая скрипка здесь https://jsfiddle.net/8xfqeb9y/
проверьте, что значения и тексты различны, и вы даже можете выбрать сейчас, набрав один
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#txtselect").keyup(function(){ $("#selbox > option").each(function() { if($(this).text()==$("#txtselect").val()) { $(this).attr('selected', 'selected'); } }); }); }); </script> </head> <body> <select id="selbox"> <option val="select">select</option> <option val="123">one</option> <option val="abc">two</option> <option val="23sfd">three</option> <option val="27345">four</option> </select> <input type="text" id="txtselect"/> </body> </html>
Попробуй это
<script type="text/javascript"> function getselected(elem) { var textvalue = $(elem).val(); if(textvalue != '') { $('select').removeAttr('disabled'); $('select option').removeAttr('selected'); $('select option').each(function(){ if ($(this).html().indexOf(textvalue) > -1) { $('select').val($(this).attr('value')); } }); } else { $('select').val(''); $('select').attr('disabled','disabled'); } } </script> <input type="text" name="name" value="" onkeydown="getselected(this)"> <select disabled="disabled"> <option value="">Select</option> <option value="1">QC code</option> <option value="2">Analyte</option> <option value="3">Assay Value</option> <option value="4">Assigned Value</option> <option value="5">STANDARDDEVIATION</option> <option value="6">ACCEPTABLEMIN</option> <option value="7">ACCEPTABLEMAX</option> <option value="8">Sample ID</option> <option value="9">Date</option> </select>