当教科书有任何值时，将自动选择下拉选项

Question

When textbox has any value then how to automatically drop-down option will selected?

For Example :

This is my drop down

<option>pick a color</option>  
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>

This is text box :

<input type="text" name="color" id="color" />

Question

If any type value is fill in text box, how to select automatically Green in drop down.

Answer 1

You could attach input event to the input to track the user change on input then if so select the option you want, check example bellow.

Hope this helps.

---

 $('#color').on('input', function() { if($(this).val()!="") $('#colors').val("others"); else $('#colors').val("0"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="colors"> <option value="0">pick a color</option> <option value="red">RED</option> <option value="blue">BLUE</option> <option value="others">Green</option> </select> <input type="text" name="color" id="color">

Answer 2

If you're using plain JavaScript, you can try this

<select id="selection">
<option>pick a color</option>  
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
</select>


<input type="text" id="color" oninput="myFunction()">

<script>
function myFunction() {
    document.getElementById("selection").value ='others';
}
</script>

Note : I haven't added the code to handle reseting the selection in case there's no text in the textbox