js html select dropdown value depends on input value

Question

I wanna create select drop down list where selected value will be depends on input value. Example: If i write 0 in <input type='text' name='answer' id="ans" oninput="myFunction();"> than will be selected dynamically value NO.

<select id="abcd">
<option value="1">OK</option>
<option value="0">NO</option>    
</select>

My attempts

 function myFunction() {      
var x = document.getElementById('ocena7');      
if (x == 0)
{
 document.getElementById("abcd").selectedIndex = 2;
}}

Greetings

Just look at this answer: https://stackoverflow.com/a/1085810/826211 — DoobyScooby, Oct 18 '18 at 21:02

score 0 · Answer 1 · answered Oct 18 '18 at 21:06

0

The problem is that with var x = document.getElementById('ans'); you get the DOM element not the value of it.

You need to replace that with: var x = document.getElementById('ans').value;

answered Oct 18 '18 at 21:06

icsd12015

33
1
10

score 0 · Answer 2 · answered Oct 18 '18 at 21:07

Just look at this answer: https://stackoverflow.com/a/1085810/826211

And for your code:

You want to use

var x = document.getElementById('ocena7').value;

if you want the value of the element. Now you're just getting a reference to the element with

var x = document.getElementById('ocena7');

score 0 · Answer 3 · answered Oct 18 '18 at 21:17

This may help

<!DOCTYPE html>
<html>
<head>
<script>
 function myFunction() {      
var x = document.getElementById('ans').value;   
if (x == 0)
{
 document.getElementById("abcd").options[1].selected = 'selected'
}
}
</script>
</head>
<body>
<select id="abcd">
<option value="1" >OK</option>
<option value="0" >NO</option>    
</select> 
<input type='text' name='answer' id="ans" oninput="myFunction();">
</body>
</html>

js html select dropdown value depends on input value

3 Answers3